
function circle( ctx, x, y, r ) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}

function line( ctx, x1, y1, x2, y2 ) {
	ctx.beginPath();
	ctx.moveTo( x1, y1 );
	ctx.lineTo( x2, y2 );
	ctx.closePath();
	ctx.stroke();
}	


function drawTextOverlay() 
{

  if(textOverlay.counter === -1) {
    return;
  }

  var alpha = textOverlay.counter / 50.0;

  if(alpha > 1 ) {
    alpha = 1;
  }

  context.globalAlpha = alpha;
  context.save();

  if(game.state === "over") {
    context.fillStyle = "white";
    context.font = "Bold 40pt Arial";
    context.fillText(textOverlay.title, 140, 200);
    context.font = "14pt Helvectica";
    context.fillText(textOverlay.subtitle, 190, 250);
  }

  if(game.state === "won") {
    context.fillStyle = "white";
    context.font = "Bold 40pt Arial";
    context.fillText(textOverlay.title, 100, 200);
    context.font = "14pt Helvectica";
    context.fillText(textOverlay.subtitle, 190, 250);
  }

  context.restore();

}

function drawDog() 
{
  context.drawImage(
    dog_image,
    0, 0, 373, 361,
    dog.x-dog.width/2, dog.y-dog.height/2, dog.width, dog.height
  );
}


function drawFlock(flock) 
{
	//line(context,sheep.x,sheep.y,sheep.x+sheep.vx,sheep.y+sheep.vy);
	
	  for(var iter in flock) {
	      var sheep = flock[iter];
	      drawSheep(sheep);
	  }
}


function drawSheep(sheep) 
{
	
	if(sheep.state === "moving") 
	{
		context.strokeStyle = "black";
		line(context,sheep.x,sheep.y,sheep.x+sheep.vx*20,sheep.y+sheep.vy*20);
		context.drawImage(sheep_image, 0, 0, 144, 144, sheep.x-10,sheep.y-10,20,20);
	}
	else if(sheep.state === "in_goal") 
	{
		context.fillStyle = "rgba(255, 200, 200, 0.5)";
		context.strokeStyle = "#888";
		circle(context,sheep.x,sheep.y,sheep.radius);	
	}
	else if(sheep.state === "in_obst") 
	{
		context.strokeStyle = "yellow";
		line(context,sheep.x,sheep.y,sheep.x+sheep.vx*20,sheep.y+sheep.vy*20);
		context.fillStyle = "yellow";
		context.strokeStyle = "#888";
		circle(context,sheep.x,sheep.y,sheep.radius);	
	}
} 


function draw_goal(g)
{
	context.save();
	context.lineWidth = 2;
	context.fillStyle = "#aaaaFF";	
    context.strokeStyle = "#9999FF";
	circle(context,g.x,g.y,g.radius);
	context.font = "Bold 24pt Arial";
	context.fillStyle = "#8888FF";		
    context.fillText("Goal", g.x-35, g.y+10);
    if(g.sheep_ingoal>0)
    {  
    	context.font = "Bold 12pt Arial";
		context.fillStyle = "#888888";		    	
    	context.fillText(g.sheep_ingoal.toString()+"/"+flock.length, g.x-18, g.y+28); 
    }
    context.restore();
}


//draw the solid background
function drawBackground() {
  context.fillStyle = "#e6e2df";
  context.fillRect(0, 0, canvas.width, canvas.height);
}

//draw the entire level (goal, obstacles)
function drawLevel(level)
{
	for(var i=0;i<level.obst_boxes.length;i++)
	{
		draw_obst_box(level.obst_boxes[i]);
	}
	
	for(var i=0;i<level.obst_circles.length;i++)
	{
		draw_circle_box(level.obst_circles[i]);
	}	
	
	draw_goal(level.goal);
} 

//draw box obstacle
function draw_obst_box(box)
{
	context.save();
	context.translate(box.x+box.width / 2, box.y+box.height / 2);
	context.rotate(Math.PI*box.angle/180);
	context.translate(-box.width / 2, -box.height / 2);
    context.rect(0,0, box.width, box.height);
    context.fillStyle = box.color;
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = 'black';
    context.stroke();
    context.restore();
}

//draw circular obstacle
function draw_circle_box(c)
{
	context.save();
	context.lineWidth = 2;
	context.fillStyle = c.color;	
    context.strokeStyle = 'black';
	circle(context,c.x,c.y,c.radius);
	context.stroke();
    context.restore();
}
