/*
 * HexGL
 * @author Thibaut 'BKcore' Despoulain <http://bkcore.com>
 * @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License. 
 *          To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/3.0/.
 */

var bkcore = bkcore || {};
bkcore.hexgl = bkcore.hexgl || {};

bkcore.hexgl.HUD = function(opts)
{
	var self = this;

	this.visible = true;
	this.messageOnly = false;

	this.width = opts.width;
	this.height = opts.height;

	this.canvas = document.createElement('canvas');
	this.canvas.width = this.width;
	this.canvas.height = this.height;

	this.ctx = this.canvas.getContext('2d');
	this.ctx.textAlign = "center";

	this.bg = opts.bg;//"textures/hud/hud-bg.png";

	this.fgspeed = opts.speed;//"textures/hud/hud-fg-speed.png";

	this.fgshield = opts.shield;//"textures/hud/hud-fg-shield.png";

	this.speedFontRatio = 24;
	this.speedBarRatio = 2.91;
	this.shieldFontRatio = 64;
	this.shieldBarYRatio = 34;
	this.shieldBarWRatio = 18.3;
	this.shieldBarHRatio = 14.3;
	this.timeMarginRatio = 18;
	this.timeFontRatio = 19.2;

	this.font = opts.font || "Arial";

	this.time = "";

	this.message = "";
	this.previousMessage = "";
	this.messageTiming = 0;
	this.messagePos = 0.0;
	this.messagePosTarget = 0.0;
	this.messagePosTargetRatio = 12;
	this.messageA = 1.0;
	this.messageAS = 1.0;
	this.messageDuration = 2*60;
	this.messageDurationD = 2*60;
	this.messageDurationS = 30;
	this.messageYRatio = 34;
	this.messageFontRatio = 10;
	this.messageFontRatioStart = 6;
	this.messageFontRatioEnd = 10;
	this.messageFontLerp = 0.4;
	this.messageLerp = 0.4;
	this.messageFontAlpha = 0.8;

	this.lapMarginRatio = 14;
	this.lap = "";
	this.lapSeparator = "/";

	this.timeSeparators = ["","'", "''",""];

	this.step = 0;
	this.maxStep = 2;
};

bkcore.hexgl.HUD.prototype.resize = function(w, h)
{
	this.width = w;
	this.height = h;
	this.canvas.width = w;
	this.canvas.height = h;
}

bkcore.hexgl.HUD.prototype.display = function(msg, duration)
{
	this.messageTiming = 0;

	if(this.message != "")
	{
		this.messageA = this.messageFontAlpha;
		this.messagePos = 0.0;
		this.messagePosTarget = this.width/this.messagePosTargetRatio;
		this.previousMessage = this.message;
	}

	this.messageFontRatio = this.messageFontRatioStart;
	this.messageAS = 0.0;
	this.message = msg;
	this.messageDuration = duration == undefined ? this.messageDurationD : duration*60;
}

bkcore.hexgl.HUD.prototype.updateLap = function(current, total)
{
	this.lap = current + this.lapSeparator + total;
}

bkcore.hexgl.HUD.prototype.resetLap = function()
{
	this.lap = "";
}

bkcore.hexgl.HUD.prototype.updateTime = function(time)
{
	this.time = this.timeSeparators[0] + time.m + this.timeSeparators[1] + time.s + this.timeSeparators[2] + time.ms + this.timeSeparators[3];
}

bkcore.hexgl.HUD.prototype.resetTime = function()
{
	this.time = "";
}

bkcore.hexgl.HUD.prototype.update = function(speed, speedRatio, shield, shieldRatio)
{
	var SCREEN_WIDTH = this.width;
	var SCREEN_HEIGHT = this.height;

	var SCREEN_HW = SCREEN_WIDTH / 2;
	var SCREEN_HH = SCREEN_HEIGHT / 2;

	if(!this.visible)
	{
		this.ctx.clearRect(0 , 0 , SCREEN_WIDTH , SCREEN_HEIGHT);
		return;
	}

	var w = this.bg.width;
	var h = this.bg.height;
	var r = h/w;
	var nw = SCREEN_WIDTH;
	var nh = nw*r;
	var oh = SCREEN_HEIGHT - nh;
	var o = 0;
	//speedbar
	var ba = nh;
	var bl = SCREEN_WIDTH/this.speedBarRatio;
	var bw = bl * speedRatio;
	//shieldbar
	var sw = SCREEN_WIDTH/this.shieldBarWRatio;
	var sho = SCREEN_WIDTH/this.shieldBarHRatio;
	var sh = sho*shieldRatio;
	var sy = (SCREEN_WIDTH/this.shieldBarYRatio)+sho-sh;
	

	if(this.step == 0)
	{
		this.ctx.clearRect(0 , oh , SCREEN_WIDTH , nh);

		if(!this.messageOnly)
		{
		    this.ctx.drawImage(this.bg, o, oh, nw, nh);

		    this.ctx.save();
			this.ctx.beginPath();
			this.ctx.moveTo(bw+ba+SCREEN_HW, oh);
			this.ctx.lineTo(-(bw+ba)+SCREEN_HW, oh);
			this.ctx.lineTo(-bw+SCREEN_HW, SCREEN_HEIGHT);
			this.ctx.lineTo(bw+SCREEN_HW, SCREEN_HEIGHT);
			this.ctx.lineTo(bw+ba+SCREEN_HW, oh);
			this.ctx.clip();
		    this.ctx.drawImage(this.fgspeed, o, oh, nw, nh);
			this.ctx.restore();

		    this.ctx.save();
			this.ctx.beginPath();
			this.ctx.moveTo(-sw+SCREEN_HW, oh+sy);
			this.ctx.lineTo(sw+SCREEN_HW, oh+sy);
			this.ctx.lineTo(sw+SCREEN_HW, oh+sh+sy);
			this.ctx.lineTo(-sw+SCREEN_HW, oh+sh+sy);
			this.ctx.lineTo(-sw+SCREEN_HW, oh+sh);
			this.ctx.clip();
		    this.ctx.drawImage(this.fgshield, o, oh, nw, nh);
			this.ctx.restore();

			// SPEED
			this.ctx.font = (SCREEN_WIDTH/this.speedFontRatio)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
		    this.ctx.fillText(speed, SCREEN_HW, SCREEN_HEIGHT - nh*0.57);

		    // SHIELD
			this.ctx.font = (SCREEN_WIDTH/this.shieldFontRatio)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
		    this.ctx.fillText(shield, SCREEN_HW, SCREEN_HEIGHT - nh*0.44);
		}
	}
	else if(this.step == 1)
	{
		this.ctx.clearRect(0 , 0 , SCREEN_WIDTH , oh);

		// TIME
	    if(this.time != "")
	    {
			this.ctx.font = (SCREEN_WIDTH/this.timeFontRatio)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
		    this.ctx.fillText(this.time, SCREEN_HW, SCREEN_WIDTH/this.timeMarginRatio);
		}

		// LAPS
		if(this.lap != "")
		{
			this.ctx.font = (SCREEN_WIDTH/this.timeFontRatio)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
		    this.ctx.fillText(this.lap, SCREEN_WIDTH-SCREEN_WIDTH/this.lapMarginRatio, SCREEN_WIDTH/this.timeMarginRatio);
		}

	    // MESSAGE
	    var my = SCREEN_HH-SCREEN_WIDTH/this.messageYRatio;

	    if(this.messageTiming > this.messageDuration+2000)
		{
			this.previousMessage = "";
			this.message = "";
			this.messageA = 0.0;
		}
		else if(this.messageTiming > this.messageDuration && this.message != "")
		{
			this.previousMessage = this.message;
			this.message = "";
			this.messagePos = 0.0;
			this.messagePosTarget = SCREEN_WIDTH/this.messagePosTargetRatio;
			this.messageA = this.messageFontAlpha;
		}

		if(this.previousMessage != "")
		{
			if(this.messageA < 0.001)
				this.messageA = 0.0;
			else
				this.messageA += (0.0 - this.messageA) * this.messageLerp;

			this.messagePos += (this.messagePosTarget - this.messagePos) * this.messageLerp;

			this.ctx.font = (SCREEN_WIDTH/this.messageFontRatioEnd)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, "+this.messageA+")";
		    this.ctx.fillText(this.previousMessage, SCREEN_HW, my+this.messagePos);
		}

		if(this.message != "")
		{
			if(this.messageTiming < this.messageDurationS)
			{
				this.messageAS += (this.messageFontAlpha - this.messageAS) * this.messageFontLerp;
				this.messageFontRatio += (this.messageFontRatioEnd - this.messageFontRatio) * this.messageFontLerp;
			}
			else
			{
				this.messageAS = this.messageFontAlpha;
				this.messageFontRatio = this.messageFontRatioEnd;
			}

			this.ctx.font = (SCREEN_WIDTH/this.messageFontRatio)+"px "+this.font;
		    this.ctx.fillStyle = "rgba(255, 255, 255, "+this.messageAS+")";
		    this.ctx.fillText(this.message, SCREEN_HW, my);
		}
	}
	
	this.messageTiming++;

	this.step++;
	if(this.step == this.maxStep) this.step = 0;
}