"use strict"; // 參考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// 花朵作業：創造一朵花
////////////////////////////////////////////////////////////////////////////////

var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = true;
var ground = true;

function fillScene() {
	scene = new THREE.Scene();
	scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );

// 光源
	var ambientLight = new THREE.AmbientLight( 0x222222 );

var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
	light.position.set( 200, 400, 500 );

var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
	light2.position.set( -500, 250, -200 );

scene.add(ambientLight);
	scene.add(light);
	scene.add(light2);

// 花
	var petalMaterial = new THREE.MeshLambertMaterial( { color: 0xCC5920 } );
	var flowerHeight = 200;
	var petalLength = 120;
	var cylGeom = new THREE.CylinderGeometry( 15, 0, petalLength, 32 );
	var flower = new THREE.Object3D();

// 你的程式寫在這裡
	// 加入程式創造 24 瓣花瓣，圍繞著球體
	// 只需要旋轉與位移 cylinder 與 petals 物件
	var cylinder = new THREE.Mesh( cylGeom, petalMaterial );
	var petal = new THREE.Object3D();
	petal.add( cylinder );

flower.add( petal );

// 剩下的花朵
	var stamenMaterial = new THREE.MeshLambertMaterial( { color: 0x333310 } );
	var stamen = new THREE.Mesh(
		new THREE.SphereGeometry( 20, 32, 16 ), stamenMaterial );
	stamen.position.y = flowerHeight;	// 移動到花的中心
	flower.add( stamen );

var stemMaterial = new THREE.MeshLambertMaterial( { color: 0x339424 } );
	var stem = new THREE.Mesh(
		new THREE.CylinderGeometry( 10, 10, flowerHeight, 32 ), stemMaterial );
	stem.position.y = flowerHeight/2;	// 從地面移動到花蕊
	flower.add( stem );

scene.add( flower );
}

function init() {
	var canvasWidth = window.innerWidth;
	var canvasHeight = window.innerHeight;
	var canvasRatio = canvasWidth / canvasHeight;

// RENDERER
	renderer = new THREE.WebGLRenderer( { antialias: false } );
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.setSize(canvasWidth, canvasHeight);
	renderer.setClearColorHex( 0xAAAAAA, 1.0 );

// 攝影機
	camera = new THREE.PerspectiveCamera( 38, canvasRatio, 1, 10000 );

// 控制
	cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
	camera.position.set(-200, 400, 20);
	cameraControls.target.set(0,150,0);
	fillScene();
}

function addToDOM() {
	var container = document.getElementById('container');
	var canvas = container.getElementsByTagName('canvas');
	if (canvas.length>0) {
		container.removeChild(canvas[0]);
	}
	container.appendChild( renderer.domElement );
}

function animate() {
	window.requestAnimationFrame(animate);
	render();
}

function render() {
	var delta = clock.getDelta();
	cameraControls.update(delta);

if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
	{
		gridX = effectController.newGridX;
		gridY = effectController.newGridY;
		gridZ = effectController.newGridZ;
		ground = effectController.newGround;
		axes = effectController.newAxes;

fillScene();
		drawHelpers();
	}

renderer.render(scene, camera);
}

function setupGui() {
	effectController = {
		newGridX: gridX,
		newGridY: gridY,
		newGridZ: gridZ,
		newGround: ground,
		newAxes: axes
	};

var gui = new dat.GUI();
	var h = gui.addFolder("格線顯示");
	h.add( effectController, "newGridX").name("顯示 XZ 格線");
	h.add( effectController, "newGridY").name("顯示 YZ 格線");
	h.add( effectController, "newGridZ").name("顯示 XY 格線");
	h.add( effectController, "newGround").name("顯示地面");
	h.add( effectController, "newAxes").name("顯示軸線");
}

// 這裡是主要步驟
document.addEventListener("DOMContentLoaded", function () {
	try {
		init();
		fillScene();
		drawHelpers();
		addToDOM();
		setupGui();
		animate();
	} catch(e) {
		var errorReport = "你的程式遇到不可復原的錯誤，無法繪製 Canvas。錯誤是：<br/><br/>";
		$('#container').append(errorReport+e);
	}
})