function showMessage(msg){
	$('text').innerText=msg;
}

function updateMessages(){
	var d=gameStatus.mines+' mine';
	if(gameStatus.mines!=1)d+='s';
	if(gameStatus.misses!=0){
		d+=', '+gameStatus.misses+' miss';
		if(gameStatus.misses>1)d+='es';
	}else{
		d+=' left';
	}
	
	var s=gameStatus.pings+' ping';
	if(gameStatus.pings!=1)s+='s';
	s+=' left';
	
	$('dchargeMessage').innerText=d;
	$('schargeMessage').innerText=s;

	$('dchargeMessage').innerHTML=d;
	$('schargeMessage').innerHTML=s;
}

function drawMap(){
	drawBackground();
	drawIslands();
	drawMarks();
	drawCharges();
	if(gameStatus.showMines)drawMines();
	drawPings();
	drawGrid();
	updateMessages();
}

function drawIslands(){
	var canvas=document.getElementById('canvas');
	var context=canvas.getContext('2d');
	var width=canvas.width/MAXX;
	var height=canvas.height/MAXY;
	for(i in islands){
		var island=islands[i];
		var img=new Image();
		img.src=island.name;
		context.drawImage(img,
			width*island.coord.x,
			height*island.coord.y);
	}

	context.stroke();
}

function drawMarks(){
	var canvas=document.getElementById('canvas');
	var context=canvas.getContext('2d');
	var width=canvas.width/MAXX;
	var height=canvas.height/MAXY;

	for(i in marks){
		var mark=marks[i];
		context.beginPath();
		context.fillStyle=mark.color;
		context.rect(width*mark.coord.x,
			height*mark.coord.y,
			width,
			height);
		context.fill();
	}
}

function drawPings(){
	var canvas=document.getElementById('canvas');
	var context=canvas.getContext('2d');
	var width=canvas.width/MAXX;
	var height=canvas.height/MAXY;
	
	var corners=[
		{x:1,y:0},
		{x:'right',y:0},
		{x:'center',y:height/2-fh/2},
		{x:1,y:height-fh},
		{x:'right',y:height-fh}
	];
	
	for(p in pings){
		var ping=pings[p];
		if(ping.returns.length==0){
			context.beginPath();
			context.strokeStyle='#ffff00';
			context.moveTo(width*ping.coord.x, height*ping.coord.y);
			context.lineTo(width*(ping.coord.x+1), height*(ping.coord.y+1));
			context.moveTo(width*(ping.coord.x+1), height*ping.coord.y);
			context.lineTo(width*ping.coord.x, height*(ping.coord.y+1));
			context.stroke();
		}else{
			for(r in ping.returns){
				var c=ping.returns[r];
				var dx=corners[r].x;
			
				if(dx=='center')dx=width/2-Math.floor(places(c)*fw/2);
				else if(dx=='right')dx=width-1-fw*places(c);
				
				drawNumber(context,
					ping.coord.x*width+dx,
					ping.coord.y*height+corners[r].y,
					c);
			}
		}
	}
}


function drawNumber(context,x,y,n){
	var d=n%10;
	context.drawImage(fontTexture,
		fw*d,0,fw,fh,
		x+(places(n)-1)*fw,y,fw,fh);
	if(n>=10)
		drawNumber(context,x,y,Math.floor(n/10));
}


function places(n){
	return Math.floor(
		Math.log(n)/
		Math.log(10))+1;
}


function drawCharges(){
	var canvas=document.getElementById('canvas');
	var context=canvas.getContext('2d');
	var width=canvas.width/MAXX;
	var height=canvas.height/MAXY;
	var dim={width:width,height:height};
	for(i in charges){
		var charge=charges[i];
		if(charge.hit){
			context.drawImage(mineImg,
				width*charge.coord.x,
				height*charge.coord.y);
		}
		drawX(context,charge.coord,dim);
	}
}

function drawMines(){
	var canvas=document.getElementById('canvas');
	var context=canvas.getContext('2d');
	var width=canvas.width/MAXX;
	var height=canvas.height/MAXY;
	var dim={width:width,height:height};
	for(i in mines){
		var mine=mines[i];
		context.drawImage(missedImg,
			width*mine.coord.x,
			height*mine.coord.y);
	}
}


function drawX(context,coord,dim){
	context.strokeStyle='#e00000';
	context.moveTo(dim.width*coord.x+dim.width/3,
		dim.height*coord.y+dim.height/3);
	context.lineTo(dim.width*coord.x+dim.width*2/3,
		dim.height*coord.y+dim.height*2/3);
	context.moveTo(dim.width*coord.x+dim.width*2/3,
		dim.height*coord.y+dim.height/3);
	context.lineTo(dim.width*coord.x+dim.width/3,
		dim.height*coord.y+dim.height*2/3);
	context.stroke();
}



function drawBackground(){
    var canvas=document.getElementById('canvas');
    var context=canvas.getContext('2d');
    context.beginPath();
    context.fillStyle='#000060';
    context.rect(0,0,canvas.width,canvas.height);
    context.fill();
}

function drawGrid(){
	var canvas=document.getElementById('canvas');
	var context=canvas.getContext('2d');
	var width=canvas.width/MAXX;
	var height=canvas.height/MAXY;
	context.beginPath();
	context.strokeStyle='#ffff00';
	for(y=0;y<MAXY;y++){
		for(x=0;x<MAXX;x++){
			context.rect(x*width,y*height,width,height);			
		}
	}
	context.stroke();
}

function screenToMap(coord){
	var canvas=document.getElementById('canvas');
	return {x: Math.floor(coord.x/(canvas.width/MAXX)),
		y: Math.floor(coord.y/(canvas.height/MAXY))};
}