"use strict";

class Renderer
{
	constructor(canvas)
	{
		this.canvas = canvas;
		this.context = canvas.getContext("2d");
		this.trackWindowSize();
		
		this.speed = 200;
		this.skyColour = "#4f91d4";
		
		this.setup();
	}
	
	setup()
	{
		this.visibleObjects = [];
		this.hillSets = [];
		this.hillSets.push(new HillSet(new Vector(2048, this.canvas.height * 0.9), 0.4, "rgb(102, 164, 90)", this.speed * 0.3));
		this.hillSets.push(new HillSet(new Vector(2048, this.canvas.height * 0.6), 0.4, "rgb(43, 131, 35)", this.speed * 0.6));
		this.hillSets.push(new HillSet(new Vector(2048, this.canvas.height * 0.2), 0.4, "rgb(50, 111, 8)", this.speed * 0.8));
		this.visibleObjects.push(...this.hillSets);
		
		var hillOffset = this.canvas.height * 0.1;
		this.hillSets[0].pos = new Vector(0, this.canvas.height - this.hillSets[0].size.y - hillOffset);
		this.hillSets[1].pos = new Vector(0, this.canvas.height - this.hillSets[1].size.y - hillOffset);
		this.hillSets[2].pos = new Vector(0, this.canvas.height - this.hillSets[2].size.y - hillOffset);
		
		this.road = new Road(this.canvas, new Vector(0, this.canvas.height * 0.9));
		this.road.speed = this.speed;
		this.visibleObjects.push(this.road);
		
		this.bicycle = new Bicycle(new Vector(this.canvas.width / 2, this.canvas.height * 0.9), this.speed);
		this.visibleObjects.push(this.bicycle);
	}
	
	start()
	{
		this.lastTime = +new Date();
		this.nextFrame();
	}
	
	nextFrame()
	{
		let startTime = +new Date();
		this.update((+new Date() - this.lastTime) / 1000);
		this.render(this.canvas, this.context);
		
		this.lastTime = startTime;
		
		requestAnimationFrame(this.nextFrame.bind(this));
	}
	
	/**
	 * Updates the simluation ready for the next frame.
	 * @param  {number} dt	The number of seconds since the last frame was rendered.
	 */
	update(dt)
	{
		for(let vobj of this.visibleObjects)
		{
			vobj.update(dt);
		}
	}
	
	render(canvas, context)
	{
		context.save();
		context.fillStyle = this.skyColour;
		context.fillRect(0, 0, canvas.width, canvas.height);
		
		/*context.fillStyle = "red";
		context.fillRect(10, 10, 100, 100);*/
		for(let vobj of this.visibleObjects)
		{
			vobj.render(context);
		}
		
		context.restore();
	}
	
	/**
	 * Updates the canvas size to match the current viewport size.
	 */
	matchWindowSize() {
		this.canvas.width = window.innerWidth;
		this.canvas.height = window.innerHeight;
		
		//this.render(this.context);
	}
	
	/**
	 * Makes the canvas size track the window size.
	 */
	trackWindowSize() {
		this.matchWindowSize();
		window.addEventListener("resize", this.matchWindowSize.bind(this));
	}
}

window.addEventListener("load", function (event) {
	if((new Date()).toISOString().substr(5, 5) !== "06-19")
		document.getElementById("event-text").style.display = "none";
	
	var canvas = document.getElementById("canvas-main"),
		renderer = new Renderer(canvas);
	renderer.start();
	window.renderer = renderer;
});