$(document).ready(
	function(){
		
	function initCanvas(x)
	{
		if (window.G_vmlCanvasManager) {G_vmlCanvasManager.initElement($('#' + x)[0]); }
		if ($('#' + x)[0].getContext("2d"))
		{
			return $('#' + x)[0].getContext("2d");
		}
		
		return false;
	}
	
	
	
	function drawBoxes(i, width, height)
	{
		$('<canvas class = "theboxes" id = "canv'+ i +'"></canvas>')
			.attr(	{	"width" : Math.floor(((height) / 2) + .5), //round up (for safari)
						"height" : height //added
					} 
				)
			.css(	{	"position": "absolute",
						"visibility" : "hidden",
						"z-index": "1000"
						//"border" : "1px solid black"
					}
				)
			.appendTo($('#map_wrapper'));
			
		
			
			var ctx = initCanvas('canv' + i);
			if (ctx != false)
			{
				
				//ctx.fillRect(0,0,$('#canv' + i).width(), $('#canv' + i).height())
				
				var w = $('#canv' + i).width();
				var h = $('#canv' + i).height();
				ctx.fillStyle = "rgb(125,145,44)"
				

				ctx.beginPath();
				ctx.moveTo(w,0)
				ctx.bezierCurveTo(0,h/15,0,h * (14/15),w,h);
				ctx.fill()
			}
			
			
			$('<canvas class = "theboxes" id = "canvR'+ i +'"></canvas>')
			.attr(	{	"width" : height / 2,
						"height" : height//added
					}
				)
			.css(	{	"position": "absolute","z-index" : "1000",
						"left" : "100px",//($('#box' + i).css("left").substring(0,$('#box' + i).css("left").length-2) - 0) + $('#box' + i).width() + "px",
						"visibility" : "hidden"
						//"border" : "1px solid black"
					}
				)
			.appendTo('#map_wrapper');
			
			var ctx = initCanvas('canvR' + i);
			if (ctx != false)
			{
				
				var w = $('#canvR' + i).width();
				var h = $('#canvR' + i).height();
				ctx.fillStyle = "rgb(125,145,44)"
				
				
				ctx.beginPath();
				ctx.moveTo(0,0)
				ctx.bezierCurveTo(w,h/15,w,h * (14/15),0,h);
				ctx.fill()
			}
			

			$('<canvas class = "theboxes" id = "canvB'+ i +'"></canvas>')
			.attr(	{	"width" : 10,
						"height" : 10
					}
				)
			.css(	{	"position": "absolute",
						"visibility" : "hidden",
						"z-index": "1000"
						//"border" : "1px solid black"
					}
				)
			.appendTo('#map_wrapper');
			
			
			var ctx = initCanvas('canvB' + i);
			if (ctx != false)
			{
				
				var w = $('#canvB' + i).width();
				var h = $('#canvB' + i).height();
				ctx.fillStyle = "rgb(125,145,44)"
				
				
				ctx.beginPath();
				ctx.moveTo(0,0)
				ctx.lineTo(w/2,h);
				ctx.lineTo(w,0);
				ctx.lineTo(0,0);
				ctx.fill()
			}

	}
	
	
	//get village names and addresses.

	
	var vill = [""
	,
"Shops at Dana Landing",
"Val Vista Professional Park",
"Vista Quinta UTAZ Professional Village&trade;",
"Gateway Medical UTAZ Professional Village&trade;",
"Fairways at Superstition Springs",
"Elliot 101 UTAZ Professional Village&trade;",
"Ventura UTAZ Professional Village&trade;",
"Gilbert Professional Park",
"Warner Century Plaza",
"Boston UTAZ Professional Village&trade;",
"San Tan UTAZ Professional Village&trade;",
"Mercy Point Medical Center",
"Power Ranch UTAZ Professional Village&trade;",
"Airpark South UTAZ Professional Village&trade;",
"Queen Creek UTAZ Professional Village&trade;",
"Sun Lakes UTAZ Professional Village&trade;",
"Mountainwood UTAZ Professional Village&trade;",
"Pinal UTAZ Professional Village&trade;",
"Maricopa Grand UTAZ Professional Village&trade;",
"Casa Grande UTAZ Professional Village&trade;",
"Thunderbird UTAZ Professional Village&trade;",
"Dana UTAZ Professional Village&trade; - Execu-Suites",
"Greenfield Medical Plaza",
"Offices at Dana Landing",
"Falcon Commerce Square",
"Executive Villas at Dana Point",
"Maricopa UTAZ Professional Village",
"Augusta Ranch UTAZ Professional Village"	]
	
	var add = [""
	,
"NWC of Baseline and 32nd Street",
"East of NEC Val Vista and Baseline",
"East of SEC Greenfield and Baseline",
"West of SWC Higley and Baseline",
"South of SWC Power and Baseline (North of Guadalupe)",
"SEC Elliot and 101",
"SEC Cooper and Elliot",
"NWC Gilbert and Warner",
"SWC Warner and 101 Freeway",
"NEC Boston and Val Vista",
"SEC Pecos and Lindsay",
"SEC Val Vista and Melrose",
"SWC Pecos and Ranch House",
"W of SWC Cooper and Queen Creek",
"SEC Rittenhouse and Ocotillo",
"NEC Alma School and Riggs",
"West of SWC Riggs and Higley",
"South of SEC Gantzel and Combs",
"NWC of Porter and Smith Enke",
"SEC Korsten and Peart",
"Thunderbird and 79th Avenue",
"SEC Baseline and Lindsay",
"E of NEC Baseline & Greenfield",
"E of NEC Baseline & Lindsay",
"NEC Greenfield & McLellan",
"SEC Baseline and Driftwood",
"NWC Maricopa Road & Smith Enke Road",
"S of SEC Guadalupe & Ellsworth"	]
	
	
	var vals = [];
	
	initiateBoxes();
	
	function initiateBoxes()
	{
	var padding = 3
	for (var i = 1; i < add.length; i++) //skip 0
	{
	//console.log(i)
		vals[i] = $('#area' + i).attr("coords");
		vals[i] = vals[i].split(",");
		$('<div class = "theboxes"></div>').attr("id", "box" + i).css({"position" : "absolute", /*"border" : "1px solid black",*/ "visibility" : "hidden", "background-color":"#7D912C","line-height":"20px","height":"40px","font-weight" :"bold", "font-size" : "10pt", "text-align": "center"
		,"z-index": "1000"
		//,"padding" : padding + "px"
		})
			.append($("<span>" + vill[i] + "</span>")).append("<br>")
			.appendTo(document.body);//#map_wrapper
			//first append to body because default size is a lot better that way!
		
		$("<span>" +  add[i]  + "</span>").css({"font-weight":"normal", "font-size":"9pt","margin": "0px"})
		.appendTo($('#box' + i));
		
		
		var width = $('#box' + i).width() + 20; //added	
		
		
		var height = $('#box' + i).height(); //added
		
		var left = vals[i][0] - (width / 2) + (vals[i][2] - vals[i][0])/2
		var top = vals[i][1] - 10/*10 is just an offset*/ - height
		
		
		//fixing 18 so it doesn't go off the map
		if (i == 18)
		{
      left = left -60;
		}
		
	
		$('#box' + i).css({
				"top" : (top) + "px", 
				"left" : left + "px"
						});
						
			$('#box' + i).css({
				"width" : width + "px",
				"height" : height + "px"
				})//that ought to stop it from resizing
				.appendTo('#map_wrapper')
				
			$(document.body).remove('#box' + i)
		
		
		
		drawBoxes(i,width,height);
		
			$('#canv' + i).css("left", (left - $('#canv' + i).width()) +  "px") //left
			$('#canv' + i).css("top", top + "px") //left
			
			$('#canvR' + i).css("left", (left + width) + "px") //right

			$('#canvR' + i).css("top", top + "px") //right
			
			var offset18
			
        if (i == 18)
        {
          offset18 = 60
        }
        else
        {
          offset18 = 0
        }
			
			$('#canvB' + i).css("left",(offset18 +  left + (width / 2) -  $('#canvB' + i).width() / 2) +"px") //bottom
			$('#canvB' + i).css("top",(top + height) + "px") //bottom
	}
	
	
	var areas = $('#locationsmap area');
	
	
	
	for (var k = 0; k < areas.length; k++)
	{
		
		$(areas[k]).mouseover(function(){
			theid = $(this).attr("id").substring("area".length);

	
			$("#box" + theid).css("visibility","visible");
			$("#canv" + theid).css("visibility","visible");
			$("#canvR" + theid).css("visibility","visible");
			$("#canvB" + theid).css("visibility","visible");
		})
		
		$(areas[k]).mouseout(function(){
			theid = $(this).attr("id").substring("area".length);
			$("#box" + theid).css("visibility","hidden");
			$("#canv" + theid).css("visibility","hidden");
			$("#canvR" + theid).css("visibility","hidden");
			$("#canvB" + theid).css("visibility","hidden");
		})
		
	}
	
	}



		});