var logDiv = document.getElementById("log");

var total = document.getElementById("total-span");

var sprite = [["cr","da","dr","e1","e10","e11","e12","e13","e14","e15","e16","e17","e18","e2","e3","e4","e5","e6","e7","e8","e9","ec","en","ha","ig","kt","n1","n10","n11","n12","n13","n14","n15","n16","n17","n18","n19","n2","n20","n21","n22","n3","n4","n5","n6","n7","n8","n9","nw1","nw10","nw11","nw3","nw2","nw4","nw5","nw6","nw7","nw8","nw9","rm","se1","se10","se11","se12","se13","se14","se15","se16","se17","se18","se19","se2","se20","se21","se22","se23","se24","se25","se26","se27","se28","se3","se4","se5","se8","se7","se6","se9","sm","sw1","sw10","sw11","sw12","sw13","sw14","sw15","sw16","sw17","sw18","sw19","sw2","sw20","sw3","sw4","sw5","sw6","sw7","sw8","sw9","tw","ub","w1","w10","w11","w12","w13","w14","w2","w3","w4","w5","w6","w7","w8","w9","wc","wd"],[0,168,282,464,520,580,655,704,742,803,864,979,1074,1114,1164,1217,1300,1353,1437,1485,1518,1562,1613,1823,1925,2155,2246,2312,2348,2398,2464,2511,2557,2619,2657,2727,2798,2835,2879,2979,3035,3095,3139,3184,3208,3264,3301,3346,3423,3477,3568,3624,3675,3749,3782,3823,3879,3961,4006,4073,4206,4282,4339,4373,4423,4466,4501,4553,4615,4650,4733,4792,4849,4891,4947,4999,5038,5071,5123,5183,5220,5271,5354,5389,5437,5475,5508,5579,5655,5796,5848,5877,5922,5964,6005,6045,6121,6186,6242,6307,6414,6452,6516,6550,6605,6629,6685,6718,6774,6814,6939,7061,7106,7141,7174,7217,7244,7272,7327,7388,7442,7489,7537,7572,7602,7639,7674]];

var layers = document.getElementById("layers");

var selectedAreas=new Array();



function out(area)

{

	area.className="area-out";

}

function findBounds(forArea, intoObject)

{

	var coords = forArea.coords;

	var coordsArray = coords.split(',');

	intoObject.x1 = 654;

	intoObject.y1 = 654;

	intoObject.x2 = 0;

	intoObject.y2 = 0;

	var x,y;

	for ( var i = 0; i < coordsArray.length/2; ++i) 

	{

		x = parseInt(coordsArray[i*2]);

		y = parseInt(coordsArray[i*2 + 1]);

		if ( x < intoObject.x1 ) 

		{

			intoObject.x1 = x;

		}

		if ( x > intoObject.x2 ) 

		{

			intoObject.x2 = x;

		}

		if ( y < intoObject.y1 ) 

		{

			intoObject.y1 = y;

		}

		if ( y > intoObject.y2 ) 

		{

			intoObject.y2 = y;

		}

	}

	intoObject.x1 = parseInt(intoObject.x1);

	intoObject.x2 = parseInt(intoObject.x2);

	intoObject.y1 = parseInt(intoObject.y1);

	intoObject.y2 = parseInt(intoObject.y2);

}



function clicked(area)

{

	var name = area.alt.toLowerCase();

	var index = selectedAreas.indexOf(name);

	if (index > -1 )

	{

		selectedAreas.splice(index, 1);

		area.title = "Click to select " + name.toUpperCase();

		document.getElementById(name).className="area-to-display";

	}

	else

	{

		selectedAreas.push(name);

		area.title = "Click to unselect " + name.toUpperCase();

		document.getElementById(name).className="area-displayed";

	}

	log(selectedAreas);	

}

function createDiv(name, index, bound)

{

    var newLayer = document.createElement("div");

    newLayer.id=name;

    newLayer.className="area-to-display";

	newLayer.style.left = (bound.x1) + 'px';

	newLayer.style.top = (bound.y1) + 'px';

	newLayer.style.width = (bound.x2-bound.x1)+ 'px';

	newLayer.style.height = (bound.y2-bound.y1) + 'px';

    newLayer.style.backgroundPosition = -sprite[1][index] + "px 0px";

    layers.appendChild(newLayer);

}

function startUp()

{

	var image = document.getElementById("map-image");
	var back = document.getElementById("back");
	var areas = document.getElementById("map").getElementsByTagName("area");
	var bound = new Object();

	var top = image.offsetTop;

	var left = image.offsetLeft;

	

	for (var i=0; i < 127; i++)

	{

		var a= areas[i];

		findBounds(a, bound);

		var name = a.alt.toLowerCase();

		var index = sprite[0].indexOf(name);

		createDiv(name, index, bound);

	}

/*
	back.style.top = top;
	back.style.top = left;
	layers.style.top = top;
	layers.style.top = left;
	image.style.top = top;
	image.style.top = left;
*/
}

function log(selecteds)

{

	var s = "";

	total.innerHTML = selecteds.length

	for (var i=0; i < selecteds.length; i++)

	{

		s += selecteds[i].toUpperCase() + "<br />";

	}

	logDiv.innerHTML = s;

}

if(!Array.indexOf)

{

	Array.prototype.indexOf = function(obj)

	{

		for(var i=0; i<this.length; i++)

		{

			if(this[i]==obj)

			{

				return i;

			}

		}

		return -1;

	}

}

//startUp();