var meter_frame_texture = new Image();
meter_frame_texture.src = "img/ui/meter_frame.png";

var meter_fill_texture = new Image();
meter_fill_texture.src = "img/ui/meter_fill.png";

var meter_overfill_texture = new Image();
meter_overfill_texture.src = "img/ui/meter_overfill.png";

var meter_back_texture = new Image();
meter_back_texture.src = "img/ui/meter_back.png";

var meter_preview_texture = new Image();
meter_preview_texture.src = "img/ui/meter_preview.png";


var vert_meter_frame_texture = new Image();
vert_meter_frame_texture.src = "img/ui/meter_frame_vert.png";

var vert_meter_fill_texture = new Image();
vert_meter_fill_texture.src = "img/ui/meter_fill_vert.png";

var vert_meter_overfill_texture = new Image();
vert_meter_overfill_texture.src = "img/ui/meter_overfill_vert.png";

var vert_meter_back_texture = new Image();
vert_meter_back_texture.src = "img/ui/meter_back_vert.png";



function point_rect_collision(p_x, p_y, b_x, b_y, b_w, b_h)
{
	//console.log("test " + p_x + ", " + p_y + " BOX " + b_x + ", " + b_y + " - " + b_w + ", " + b_h);

	if(p_x < b_x - .5  * b_w)
	return false;
	if(p_x > b_x + .5 * b_w)
	return false;
	if(p_y < b_y - .5 * b_h)
	return false;
	if(p_y > b_y + .5 * b_h)
	return false;

//console.log("TREU");
	return true;
}

function draw_center(img, x, y, w, h, a)
{
	//a = a || 1;//thanks IE9
	context.globalAlpha = a;
	context.drawImage(img, x - w / 2.0, y - h / 2.0, w, h);
	context.globalAlpha = 1;
}

function draw_center_tex_coord(img, x, y, w, h, a, sx, sy, sw, sh) {
    //a = a || 1;//thanks IE9
    context.globalAlpha = a;
    context.drawImage(img, sx, sy, sw, sh, x - w / 2.0, y - h / 2.0, w, h);
    context.globalAlpha = 1;
    console.log(sx + ", " + sy);

}

function draw_center_rotation(img, x, y, w, h, r, a)
{
	a = a || 1;
	context.save();
	context.translate(x, y);
	context.rotate(r);
	context.translate(-x, -y);
	context.globalAlpha = a;
	context.drawImage(img, x - .5 * w, y - .5 * h, w, h);
	context.globalAlpha = 1;

    context.restore();
}

var font_image = [];

font_image[TEXT_COLOR_ENUM.WHITE] = new Image();
font_image[TEXT_COLOR_ENUM.WHITE].src = "img/font.png";

font_image[TEXT_COLOR_ENUM.RED] = new Image();
font_image[TEXT_COLOR_ENUM.RED].src = "img/font_red.png";

font_image[TEXT_COLOR_ENUM.GREEN] = new Image();
font_image[TEXT_COLOR_ENUM.GREEN].src = "img/font_green.png";


TEXT_REQUEST = function(str, x, y, size, color)
{
  var self = {};
  self.x = x;
  self.y = y;
  self.size = size;
  self.str = str;
  self.color = color;

  return self;
}

var text_requests = [];

function clamp(value, min, max)
{
 return  Math.min(Math.max(value, min), max);
}

function draw_text(str, x, y, size, color, style = 0)
{
	

	size = size || 20;
	color = color || TEXT_COLOR_ENUM.WHITE;

	//str = str.toUpperCase();
	//*

    if(style == 0)
        context.font = size + "px large ";
    else
		context.font = "bold italic " + size + "px small ";

		//auto override font choice for numerals
	if (typeof (str) == "number" || str.charAt(0) >= '0' && str.charAt(0) <= '9')
		context.font = "bold italic " + size + "px numerals ";

	//context.fontStyle = "italic";

	/*if(size > 25)
	{
	 context.fillStyle = '#000000';

	 context.fillText(str, x + .12 * size, y + .06 * size);
	}*/
	 //context.fillText(str, x + 5, y + 2.5);

	if(color == TEXT_COLOR_ENUM.WHITE)
		context.fillStyle = 'white'; 
	else if(color == TEXT_COLOR_ENUM.RED)
    	context.fillStyle = '#ff1919ff'; 
	else if(color == TEXT_COLOR_ENUM.GREEN)
		context.fillStyle = '#19ff42ff'; 

	//if(size <= 25)
	{
		context.lineWidth = .25 * size;
		context.lineJoin = 'round';
		context.strokeStyle = "#000000";
		context.strokeText(str, x, y);
	}

	context.fillText(str, x, y);
/*
		//console.log(color + "|" + str);
		if(color != TEXT_COLOR_ENUM.WHITE &&
			color != TEXT_COLOR_ENUM.RED &&
			color != TEXT_COLOR_ENUM.GREEN
		)
          debugger;
	//*
	//console.log(str + " " +  size);
	text_requests.push(TEXT_REQUEST(str.toString(), x, y, size, color));
//*/
}

function render_all_text()
{
	for(var j in text_requests)
	{

		for(var i in text_requests[j].str)
		{
			//console.log(str[i] + (str[i].charCodeAt(0) % 8));
			//console.log(str[i] + Math.floor(str[i].charCodeAt(0) / 8));

				
		context.drawImage(font_image[text_requests[j].color],
		128.0 * (text_requests[j].str[i].charCodeAt(0) % 8),
		128.0 * Math.floor(text_requests[j].str[i].charCodeAt(0) / 8),
		128, 128,
		text_requests[j].x + .4 * text_requests[j].size * i, text_requests[j].y - .5 * text_requests[j].size,
		text_requests[j].size, text_requests[j].size
		) ;
		}
	}

	text_requests.length = 0;
}

function random_int(min, max)
{
    return Math.floor(Math.random() * (max - min) + min);
}

function random_float(min, max)
{
    return Math.random() * (max - min) + min;
}

function hash_string(str)
{
	var hash = 5381;
	var c
}

var ui_state_array = {};
const UI_NORMAL = 0;
const UI_TRIGGERED = 1;
const UI_RELEASED = 2;

//var ui_was_button_mouseover = false;

function draw_button(img, id, x, y, w, h, label, ico, disable, disable_img, disable_sfx)
{
    label = label || "";
    disable = disable || false;
    disable_sfx = disable_sfx || false;

	context.globalAlpha = 1;
	if(! disable)
	{
		if(point_rect_collision(INPUT.mouse_screen.x, INPUT.mouse_screen.y, x, y, w, h))
		{
			w *= 1.05;
			h *= 1.05;

			if(INPUT.left_triggered)
				ui_state_array[id] = UI_TRIGGERED;
			else if(!INPUT.left_pressed && ui_state_array[id] == UI_TRIGGERED)
				ui_state_array[id] = UI_RELEASED;

		}
		else
			ui_state_array[id] = UI_NORMAL;

		if(ui_state_array[id] == UI_TRIGGERED)
		{
			x += 5;
			y += 5;
		}
	}

	if(! disable)
		context.drawImage(img, x - w / 2.0, y - h / 2.0, w, h);
	else if(disable_img != undefined)
		context.drawImage(disable_img, x - w / 2.0, y - h / 2.0, w, h);

	//if(label === label)
  		draw_text(label, x - w / 3.5, y + h / 5, h / 1.5);

		  if(ico != undefined)
		  	draw_center(ico, x - w / 3, y + h / 20, h / 1.5, h / 1.5);

	if(! disable)
	{
		if(ui_state_array[id] == UI_RELEASED)
		{
		    ui_state_array[id] = UI_NORMAL;
		    if (!disable_sfx)
		        button_sfx.play();

			return true;
		}  
	}

	 return false;
}


function draw_bar(x, y, w, h, percent, damage_preview)
{
	
	draw_center(meter_back_texture, x, y, w, h);
	
	//percent = 0.0;
	//damage_preview = 9;

	if(percent > 0.0 && percent < 1.0)
	{
		context.drawImage(meter_fill_texture, 
		0, 0, 
		300 * percent, 75, 
		x - w / 2.0 , 
		y - h / 2.0, 
		w * percent, 
		h) ;
	}
	else if(percent >= 1.0)
	{
	  draw_center(meter_fill_texture, x, y, w, h)

	  percent -= 1.0;

	  if(percent > 1.0)//@TODO: maybe add additional overfill meters later
		percent = 1.0;

	  context.drawImage(meter_overfill_texture, 
		0, 0, 
		300 * percent, 75, 
		x - w / 2.0 , 
		y - h / 2.0, 
		w * percent, 
		h) ;
	}

	if(damage_preview > 0.0)
	{
		var fraction = percent - Math.floor(percent);

		context.drawImage(meter_preview_texture, 
			300 * fraction, 0, 
			300 * (fraction + damage_preview), 75, 
			x - w / 2.0 + fraction * w, 
			y - h / 2.0, 
			w * Math.min(damage_preview, 1.0 - fraction), 
			h) ;
			
			var temp =  Math.min(1.0, Math.max(0.0, (damage_preview - (1.0 - fraction))));

		context.drawImage(meter_preview_texture, 
			300 * fraction, 0, 
			300 * Math.min(1.0, (fraction + damage_preview)), 75, 
			x - w / 2.0, 
			y - h / 2.0, 
			w *temp, 
			h) ;

	}

	draw_center(meter_frame_texture, x, y, w, h);

}

//var test_timer = 0.0;

function draw_bar_vert(x, y, w, h, percent, alph)
{
//test_timer += get_frame_time();

if(alph <= 0.0)
return;

context.globalAlpha = alph;
	draw_center(vert_meter_back_texture, x, y, w, h, alph);
	 
context.globalAlpha = alph;
	//percent = .5 + .5 * Math.sin(test_timer);

	//console.log(percent);
	
	if(percent > 1.0)//@TODO: maybe add additional overfill meters later
	percent = 1.0;

	if(percent > 0.0 && percent <= 1.0)
{
	context.drawImage(vert_meter_fill_texture, 
	  0, 300 * (1.0 - percent), 
	  75 , 300 * percent, 
	  x - w / 2.0 , 
	  y + h / 2.0 - h * percent, 
	  w , 
	  h * percent) ;
	}
	/*else if(percent >= 1.0)
	{
	  draw_center(vert_meter_fill_texture, x, y, w, h, alph)

	  context.globalAlpha = alph;

	  percent -= 1.0;

	  if(percent > 1.0)//@TODO: maybe add additional overfill meters later
		percent = 1.0;

	  context.drawImage(vert_meter_overfill_texture, 
		0, 0, 
		300 , 75* percent, 
		x - w / 2.0 , 
		y - h / 2.0, 
		w , 
		h * percent) ;
	}*/

	draw_center(vert_meter_frame_texture, x, y, w, h, alph);

	context.globalAlpha = 1.0;

}

function draw_circular_bar(x, y, w, percent)
{
	if(percent > 0.0)
	{
		context.beginPath();
		context.arc(x,y,w/2.5,0.0*Math.PI,2.0*Math.PI);

		context.lineWidth = w / 8;
		context.strokeStyle = "#7d7d7dff";
		context.stroke();

		
		context.beginPath();
		context.arc(x,y,w/2.5,1.5*Math.PI, (1.5 + percent * 2.0)*Math.PI);

		context.lineWidth = w / 8;
		context.strokeStyle = "#FFFFFF";
		context.stroke();
	}
}