var gmarkers = [];
var htmls = [];
var to_htmls = [];
var from_htmls = [];
var ii=0;

function tohere(im) {
	gmarkers[im].openInfoWindowHtml(to_htmls[im]);
}
function fromhere(im) {
	gmarkers[im].openInfoWindowHtml(from_htmls[im]);
}


function initGmap(mapid){

	var map = null;
	var geocoder = null;
	var existingOnUnload = null;
	var marker = null;
	var bounds = new GLatLngBounds();


	if (window.onunload){
		existingOnUnload = window.onunload;
	}

	window.onunload=function(ev){
		//Run any onload that we found.
		if (existingOnUnload)
		{
			existingOnUnload(ev);
		}
		GUnload();
	}

	function createMarker(point, name, address, iconcolor, bounds ) {

		var gicons = [];

		var farbicon = new GIcon();
		farbicon.iconSize = new GSize(12, 22);
		farbicon.shadowSize = new GSize(22, 20);
		farbicon.iconAnchor = new GPoint(6, 20);
		farbicon.infoWindowAnchor = new GPoint(10, 1);

		gicons["red"] = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_red.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png" );
		gicons["blue"] = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_blue.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		gicons["green"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_green.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		gicons["orange"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_orange.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		gicons["yellow"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_yellow.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		gicons["purple"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_purple.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		gicons["brown"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_brown.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		gicons["gray"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_gray.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		gicons["white"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_white.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
		gicons["black"]  = new GIcon(farbicon, "http://labs.google.com/ridefinder/images/mm_20_black.png", null, "http://labs.google.com/ridefinder/images/mm_20_shadow.png");


		var marker = new GMarker(point, gicons[iconcolor]);

		var im = ii;

		name = '<b>'+ name +'</b>';

		// The info window version with the "to here" form open
		to_htmls[im] = name + '<br><br>'+ literals.PATH +': <b>'+ literals.TOHERE +'</b> - <a href="javascript:fromhere(' + im + ')">'+ literals.FROMHERE +'</a>' +
		'<form class="directions" action="http://maps.google.es/maps" method="get" target="_blank">' +
		'<br><br>'+ literals.FROM +': <input type="text" SIZE=20 MAXLENGTH=60 name="saddr" id="saddr" value="" />' +
		'<INPUT value="' + literals.ACTION +'" TYPE="SUBMIT"><input type="hidden" name="daddr" value="' + address + '" /><form>';

		// The info window version with the "to here" form open
		from_htmls[im] = name + '<br><br>'+ literals.PATH +': <a href="javascript:tohere(' + im + ')">'+ literals.TOHERE +'</a> - <b>'+ literals.FROMHERE +'</b>' +
		'<form class="directions" action="http://maps.google.es/maps" method="get"" target="_blank">' +
		'<br><br>'+ literals.TO +': <input type="text" SIZE=20 MAXLENGTH=60 name="daddr" id="daddr" value="" />' +
		'<INPUT value="'+ literals.ACTION +'" TYPE="SUBMIT"><input type="hidden" name="saddr" value="' + address + '" /><form>';

		// The inactive version of the direction info
		var html = name + '<br><br>'+ literals.PATH +': <a href="javascript:tohere(' + im + ')">'+ literals.TOHERE +'</a> - <a href="javascript:fromhere(' + im + ')">'+ literals.FROMHERE +'</a>';

		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html);
		});

		gmarkers[im] = marker;
		htmls[im] = html;
		ii++;

		bounds.extend(point);
		return marker;
	}

	if (GBrowserIsCompatible()) {

		//HALLAMOS LA POSICIÓN DEL HOTEL PRINCIPAL EN EL ARRAY
		var main_loc = 0;
		for(var i=0; i<json_locations.length; i++){
			if(json_locations[i]['isMain'] == true){
				main_loc = i;
			}
		}


		map = new GMap2(document.getElementById(mapid));
		//map.addControl(new GLargeMapControl());
		map.addControl(new GSmallMapControl());
		//map.addControl(new GSmallZoomControl());
		map.addControl(new GMapTypeControl());
		//map.addControl(new GSmallMapTypeControl());
		map.addControl(new GScaleControl());
		map.addControl(new GOverviewMapControl());


		//centramos el mapa en el marcador del hotel que estamos visualizando
		var centerPoint = new GLatLng(json_locations[main_loc]['latitude'], json_locations[main_loc]['longitude']);
		map.setCenter(centerPoint, parseInt( json_locations[main_loc]['zoom'] ));


		//pintamos los marcadores de los hoteles de la zona
		for(var i=0; i<json_locations.length; i++){
			var loc = json_locations[i];
			var myPoint = new GLatLng(loc['latitude'], loc['longitude']);

			if(i==main_loc){
				icon_color = 'red';
			}else{
				icon_color = 'orange';
			}

			var myMarker = createMarker(myPoint, loc['name'], loc['address'], icon_color, bounds);
			map.addOverlay(myMarker);

			//abrimos el globo de información del hotel que estamos visualizando
			if(i==main_loc){
				myMarker.openInfoWindowHtml(htmls[main_loc]);
			}
		}


		//map.setCenter(bounds.getCenter(), (map.getBoundsZoomLevel(bounds) - 1));
		map.setMapType(eval(json_locations[main_loc]['mapType']));


	} else {
	  //alert("Sorry, the Google Maps API is not compatible with this browser");
	}

}