//<![CDATA[

var shape = {coord: [7,5,26,5,26,24,12,24,7,29],type:'poly'};
var k_ico = new google.maps.MarkerImage('/img/pins.png',new google.maps.Size(34,38),new google.maps.Point(0,0),new google.maps.Point(7,30));
var m_ico = new google.maps.MarkerImage('/img/pins.png',new google.maps.Size(34,38),new google.maps.Point(34,0),new google.maps.Point(7,30));
var r_ico = new google.maps.MarkerImage('/img/pins.png',new google.maps.Size(34,38),new google.maps.Point(68,0),new google.maps.Point(7,30));
var s_ico = new google.maps.MarkerImage('/img/pins.png',new google.maps.Size(34,38),new google.maps.Point(102,0),new google.maps.Point(7,30));
var customIcons = {kulttuuri:{icon:k_ico,elemclass:'labels_k'},muoti:{icon:m_ico,elemclass:'labels_m'},ravintolat:{icon:r_ico,elemclass:'labels_r'},sisustus:{icon:s_ico,elemclass:'labels_s'}};

function pad(number,length) { var str = '' + number; while (str.length < length) { str = '0' + str; } return str; }
function bindInfoWindow(marker, map, html, circle, ZetIndex) {
	google.maps.event.addListener(marker, 'click', function() {
		marker.setZIndex(ZetIndex);
		document.getElementById("company").innerHTML = html;
		map.setCenter(marker.getPosition());
		map.setZoom(16);
		circle.setCenter(marker.getPosition());
		circle.setMap(map);
		document.location.href="#company";
		ZetIndex++;
	} );
}
function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); }
function doNothing() { }

// This function picks up the click and opens the corresponding info window
function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); }

var gmarkers = [];

function load() {

	var side_bar_html = "";
	var latlng = new google.maps.LatLng(60.179727,24.938965);
	var circle = new google.maps.Circle({strokeWeight: 1, fillColor:"#FF0000", strokeColor:"#FF0000", radius: 8, center: latlng}); 
	var ZetIndex = 500;
	var bgOptions = { scrollwheel: false, zoom: 12, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, streetViewControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng };
	var map = new google.maps.Map(document.getElementById("map"), bgOptions);
	var bounds = new google.maps.LatLngBounds();
	var zoomListner = google.maps.event.addListener(map, 'zoom_changed', function() { if (this.getZoom() > 16) { this.setZoom(16); }  if (this.getZoom() < 9) { this.setZoom(9); }  });

	downloadUrl("/poidata.xml.php?city=helsinki&lob=", function(data) {
		var xml = data.responseXML;
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var poiid = pad(i+1,2);
			var name = markers[i].getAttribute("name");
			var address = markers[i].getAttribute("address");
			var type = markers[i].getAttribute("type");
			var info = markers[i].getAttribute("info");
			var desc = markers[i].getAttribute("desc");
            var tel  = markers[i].getAttribute("tel");
			var web = '<a href="http://' + markers[i].getAttribute("web") + '" target="_blank">' + markers[i].getAttribute("web") + '</a>';
			var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
			var html = "<b class=" + type + ">" + poiid + "</b> ";
			if(name) { html = html + "<b>" + name + "</b> <br/>"; }
			if(address) { html = html + address + "<br/>"; }
			if(tel) { html = html + "puh: " + tel + "<br/><br />"; }
            if(info) { html = html + info + "<br/>"; }
			if(markers[i].getAttribute("web")) { html = html + web; }
			if(desc) { html = html + "<p>" + desc + "</p>"; }
			var icon = customIcons[type] || {};
			var marker = new MarkerWithLabel({ map: map, position: point, icon: icon.icon, title: poiid + ' ' + name, shape: shape, labelContent: poiid, labelAnchor: new google.maps.Point(0, 25), labelClass: icon.elemclass, labelInBackground: false });
			bindInfoWindow(marker, map, html, circle, ZetIndex);
			gmarkers.push(marker);
			side_bar_html += '<div class="' + type + '" onclick="myclick(' + (gmarkers.length-1) + ');"><b>' + poiid + '</b> ' + name + '</div>';

			bounds.extend(point);
			map.fitBounds(bounds);
		}

		var side_bar = document.getElementById("side_bar");
		if(side_bar) { side_bar.innerHTML = side_bar_html; }

	});

}

window.onload = load;

//]]>