let container1 = document.createElement('div');
document.body.appendChild(container1);

let container2 = document.createElement('div');
document.body.appendChild(container2);

let scene = undefined;
let renderer = undefined;
let camera = undefined;
let directionalLight = ambientLight = undefined;
let controls = undefined;
let stats = undefined;
let boxMesh = undefined;

let guiFields = {
	"bumpScale": 0.3
};

main();
render();

function main() {
	initScene();
	initRenderer(container1);
	initGUI();
	initCamera();
	initLight();
	initControls();
	textureBump();
	initStats(container2);
	window.addEventListener('resize', onWindowResize, false);
}

function initScene() {
	scene = new THREE.Scene();
}

function initCamera() {
	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 5, 35);
	camera.lookAt(scene.position);
}

function initRenderer(container1) {
	renderer = new THREE.WebGLRenderer({antialias:true});
	renderer.setClearColor(0xffffff, 1.0);
	renderer.setSize(window.innerWidth, window.innerHeight);
	container1.appendChild(renderer.domElement);
}

function initGUI() {
	let gui = new dat.GUI();
	gui.add(guiFields, 'bumpScale', 0, 1).onChange(function (e) {
		boxMesh.material.bumpScale = e;
	});
}

function initLight() {
	ambientLight = new THREE.AmbientLight(0xffffff, 0.35);
	scene.add(ambientLight);

	directionalLight = new THREE.DirectionalLight(0xffffff);
	directionalLight.position.set(10, 10, 10);
	scene.add(directionalLight);
}

function initControls() {
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.autoRotate = false;
	controls.enableKeys = true;
}

function textureBump() {
	let texture1 = new THREE.TextureLoader().load("examples/textures/brick_bump.jpg");
	let texture2 = new THREE.TextureLoader().load("examples/textures/brick_diffuse.jpg");
	let geometry = new THREE.BoxGeometry(10, 10, 10, 30, 30, 30);
	let material = new THREE.MeshPhongMaterial({
		map: texture2,
		bumpMap: texture1,
		bumpScale: 0.3
	});

	boxMesh = new THREE.Mesh(geometry, material);

	scene.add(boxMesh);
}

function initStats(container2) {
	stats = new Stats();
	stats.setMode(0);

	stats.domElement.style.position = 'absolute';
	stats.domElement.style.left = '0px';
	stats.domElement.style.top = '0px';

	container2.appendChild(stats.domElement);
}

function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight);
}

function render() {
	controls.update();
	stats.update();
	requestAnimationFrame(render);
	renderer.render(scene, camera);
}