$(document).ready(function() {
	var canvas_name = "canvas1"
	var sites = ["code", "personal"]
  var coordinates = split_canvas(sites, canvas_name)
	inject_image_map(coordinates, canvas_name)
	$($("area")[0]).attr("href", "http://code.vincentcharles.com")
	$($("area")[1]).attr("href", "http://blob.vincentcharles.com")
})

//todo: make these
// function find_word_coords(coord) {
// }
// 
// function draw_word(word, coords) {
//   var canvas1 = document.getElementById("canvas1")
//   var context = canvas1.getContext("2d")
// 	context.font = "bold 12px san-serif"
// 	context.fillStyle = "#000"
// 	context.fillText(word, coords[0], coords[1])
// }

function inject_image_map(coords, canvas_name) {
	var map = $("map").attr("name", canvas_name)
	var area_coords = ""
	for (var i = 0; i < coords.length; i++) {
		area_coords += "<AREA SHAPE=\"POLY\" COORDS=\""
		area_coords += coords[i]
		area_coords += "\" HREF=>"
	}
	$(map).append(area_coords)
}

// return coordinates for drawing links
function split_canvas(list, canvas_id) {
	var canvas = document.getElementById("canvas1")
	var context = canvas.getContext("2d")
	var canvas_W = $(window).width() - 25
	var canvas_H = $(window).height() - 25 - 25 //room for footer 
	canvas.setAttribute("width", canvas_W)
	canvas.setAttribute("height", canvas_H) 
	// context.clearRect(0,0,canvas_W, canvas_H)
	var zeroish = 0.5
	var tile_size = list.length
	var x = $(canvas).width() - zeroish
	var y = $(canvas).height() - zeroish
	var x_buffer = x * 0.2
	var y_buffer = y * 0.2
	
	$('img').attr('height', y)
	$('img').attr('width', x)

	var coords = ""

	context.restore()
	context.beginPath()
	context.fillStyle = "#5e83ac"
	context.closePath()
	context.fillRect(zeroish, zeroish, x, y)
	
	context.closePath()
	
	if (list.length == 2) {
		//4 of 6 cases: vertical line, horizontal, diagonal on left and bottom, and diagonal on top and right
		var x1 = get_point(x, x_buffer)
		var x2 = get_point(x, x_buffer)
		var y1 = get_point(y, y_buffer)
		var y2 = get_point(y, y_buffer)

		var n = Math.ceil(4 * Math.random())
		
		context.beginPath();  
		context.arc(75,75,50,0,Math.PI*2,true); //circle
		context.moveTo(110,75);  
		context.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)  
		context.moveTo(65,65);  
		context.arc(60,65,5,0,Math.PI*2,true);  // Left eye  
		context.moveTo(95,65);  
		context.arc(90,65,5,0,Math.PI*2,true);  // Right eye

		switch(n) {
			case 1:
			{				
				context.lineTo(zeroish,zeroish)
				context.lineTo(zeroish,y1)
				context.lineTo(x,y2)
				context.lineTo(x, zeroish)
				context.lineTo(zeroish,zeroish)
				coords = [[zeroish, zeroish, zeroish, y1, x, y2, x, zeroish].join(',')]
				coords.push([zeroish,y1, x,y2, x,y, zeroish,y].join(','))
				break;
			}
			case 2:
			{
				context.lineTo(zeroish,zeroish)
				context.lineTo(x1,zeroish)
				context.lineTo(x2,y)
				context.lineTo(zeroish, y)
				coords = [[zeroish,zeroish, x1,zeroish, x2,y, zeroish,y].join(',')]
				coords.push([x1,zeroish, x2,y, x,y, x,zeroish].join(','))
				break;
			}

			case 3:
			{
				context.lineTo(zeroish,y1)
				context.lineTo(zeroish,y)
				context.lineTo(x1,y)
				context.lineTo(zeroish, y1)
				coords = [[zeroish, y1, zeroish,y, x1,y].join(',')]
				coords.push([zeroish,zeroish, zeroish,y1, x1,y, x,y, x,zeroish].join(','))
				break;
			}

			case 4:
			{
				context.lineTo(x1, zeroish)
				context.lineTo(x, y1)
				context.lineTo(x, zeroish)
				context.lineTo(x1, zeroish)
				coords = [[x1,zeroish, x,y1, x,zeroish].join(',')]
				coords.push([zeroish,zeroish, x1,zeroish, x,y1, x,y, zeroish,y].join(','))
			}
		}
		// alert(coords)
		context.closePath()
		context.fillStyle = "#5592d7"
		context.fill()
		if (coords == "") {
			coords = split_canvas(list, canvas_id)
		}
		return coords
	}	
}

function get_point(max, buffer) {
	return Math.round(Math.random() * (max - buffer)) + buffer / 2.0
}