vpOfficeInfo = {
	
	"Stockholm": {lat:59.335116, long:18.03335, zoom: 15, title: "Stockholm Office, HQ", street: "St:eriksgatan 46 A", location: "112 34 Stockholm"},
	"London": {lat:51.5146468, long:-0.1378974, zoom: 16, title: "London Office", street: "51-53 Great Marlborough Street", location: "London W1F 7JT"}
	};

function vpOffices(map_canvas_id) {
	var map_canvas = $(map_canvas_id);
	GUnload();
      if (GBrowserIsCompatible()) {
		var maps = new Element('div', {'id':'maps','style':'width:100%;height:100%;' });
		var headers = new Element('h3', { });
		
		// show map
		var showMap = function showMap(place) {
			GUnload();
			vpOfficeInfo[place].mapDiv.removeClassName('hide');
			vpOfficeInfo[place].header.addClassName('active');
			var map = new GMap2(vpOfficeInfo[place].mapDiv);
			map.setCenter(new GLatLng(vpOfficeInfo[place].lat,vpOfficeInfo[place].long), vpOfficeInfo[place].zoom);
	
			// karta, satellit, hybrid
			map.addControl(new GMapTypeControl());
			// zoom, etc
			map.addControl(new GSmallMapControl());
		
			var infoHtml = function infoHtml(place) {
				var myHtml = "<div style='float:left; margin-right:10px;'><img alt='logo' width='60px' height='67px' src='http://www.videoplaza.com/wp-content/themes/videoplaza/graphics/logo.gif' /></div><div style='float:left;'><b>" + vpOfficeInfo[place].title + "</b><br/>" + vpOfficeInfo[place].street + "<br/>" + vpOfficeInfo[place].location + "</div>";
				return myHtml;
			};
			
			// marker
			var createMarker = function createMarker(point, place) {
				var marker = new GMarker(point);
				marker.value = place;
				GEvent.addListener(marker, "click", function() {
					map.openInfoWindowHtml(point, infoHtml(place));
				});
				return marker;
			};
			map.addOverlay(createMarker(map.getCenter(), place));
			map.openInfoWindowHtml(map.getCenter(), infoHtml(place));
		};

		var hideMap = function hideMap(place) {
			// hide any existing maps;
			vpOfficeInfo[place].header.removeClassName('active');
			vpOfficeInfo[place].mapDiv.addClassName('hide');	
		};

		// switch map
		var toggleActive = function toggleActive(event) {
			var clickedElement = Event.element(event);
			for (var place in vpOfficeInfo) {
				if (vpOfficeInfo.hasOwnProperty(place)) {
					var element = document.getElementById(place + "_header");
					if (element != clickedElement) {
						hideMap(place);
					} else {
						showMap(place);
					}
				}
			}
		};
		
		for (var place in vpOfficeInfo) {
			if (vpOfficeInfo.hasOwnProperty(place)) {
				var header = new Element('span', { 'id':place + '_header' }).update(place).observe('click', toggleActive);
				headers.insert(header);
				var mapDiv = new Element('div', {'id':place + '_canvas','style':'width:100%;height:100%;' });
				maps.insert(mapDiv);
				vpOfficeInfo[place].header = header;
				vpOfficeInfo[place].mapDiv = mapDiv;
				mapDiv.addClassName('hide');
			}
		}
		
		map_canvas.insert(headers);
		map_canvas.insert(maps);
		showMap('Stockholm');
      }
    }