var pinWidth = 15;
var pinHeight = 15;

function putPins(id, pinsData) {
	var div = document.getElementById(id);
	var img = div.getElementsByTagName("img")[0];

	div.style.position = "relative";
	div.style.width = img.width + "px"; 
	var pins = [];
	var pin;

	for (var i in pinsData) {
		pin = document.createElement("span");
		pin.appendChild(document.createTextNode(pinsData[i][0]));

		pin.className = "pin";
		pin.title = pinsData[i][3];
		pin.style.left = (pinsData[i][1] - Math.round(pinWidth / 2)) + "px";
		pin.style.top = (pinsData[i][2] - Math.round(pinHeight / 2)) + "px";
		pin.style.display = "none";

		div.appendChild(pin);
		pins.push(pin);
	}

	div.onmouseover = function() {
		for (var i in pins) {
			pins[i].style.display = "block";
		}
	};

	div.onmouseout = function() {
		for (var i in pins) {
			pins[i].style.display = "none";
		}
	};
}