"use strict"; // 參考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// 多邊形半徑作業
// 你的作業是寫一個接收 3 個參數的函式：
//   sides － 多邊形有多少邊
//   location － 多邊形中心位置，類型是 THREE.Vector3
//   radius － 多邊形的半徑
// 回傳使用最少三角型繪製的多邊形網格
////////////////////////////////////////////////////////////////////////////////

var camera, scene, renderer;
var windowScale;

function PolygonGeometry(sides, location, radius) {
	var geo = new THREE.Geometry();

// 產生頂點
	for ( var pt = 0 ; pt < sides; pt++ )
	{
		// 加 90 度使我們從 +Y 軸開始，逆時針旋轉
		var angle = (Math.PI/2) + (pt / sides) * 2 * Math.PI;

var x = Math.cos(angle) + location.x;
		var y = Math.sin(angle) + location.y;

// 儲存頂點位置
		geo.vertices.push( new THREE.Vector3( x, y, 0.0 ) );
	}

// 產生面
	for ( var face = 0 ; face < sides-2; face++ )
	{
		// 創造三角形扇形，從第一個 +Y 點開始
		geo.faces.push( new THREE.Face3( 0, face+1, face+2 ) );
	}
	// 完成：回傳
	return geo;
}

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

// 場景
	scene = new THREE.Scene();

// 攝影機：Y 上，X 右，Z 前
	windowScale = 12;
	var windowWidth = windowScale * canvasRatio;
	var windowHeight = windowScale;

camera = new THREE.OrthographicCamera( windowWidth / - 2, windowWidth / 2, windowHeight / 2, windowHeight / - 2, 0, 40 );

var focus = new THREE.Vector3( 5,5,0 );
	camera.position.x = focus.x;
	camera.position.y = focus.y;
	camera.position.z = 10;
	camera.lookAt(focus);

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

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 render() {
	renderer.render( scene, camera );
}

// 腳本本體
document.addEventListener("DOMContentLoaded", function () {
try {
		init();
		showGrids();
		var geo = PolygonGeometry(9, new THREE.Vector3( 5, 5, 0 ), 4);
		var material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.FrontSide } );
		var mesh = new THREE.Mesh( geo, material );
		scene.add( mesh );
		addToDOM();
		render();
	} catch(e) {
		var errorReport = "Your program encountered an unrecoverable error, can not draw on canvas. Error was:<br/><br/>";
		$('#container').append(errorReport+e);
	}
})