var customIcons = [];

	var icon1 = new GIcon(); 
	icon1.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon1.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon1.iconSize = new GSize(20, 32);
	icon1.shadowSize = new GSize(32, 30);
	icon1.iconAnchor = new GPoint(10, 30);
	icon1.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_1"] = icon1;

	var icon2 = new GIcon(); 
	icon2.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon2.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon2.iconSize = new GSize(20, 32);
	icon2.shadowSize = new GSize(32, 30);
	icon2.iconAnchor = new GPoint(10, 30);
	icon2.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_2"] = icon2;

	var icon3 = new GIcon(); 
	icon3.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon3.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon3.iconSize = new GSize(20, 32);
	icon3.shadowSize = new GSize(32, 30);
	icon3.iconAnchor = new GPoint(10, 30);
	icon3.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_3"] = icon3;

	var icon4 = new GIcon(); 
	icon4.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon4.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon4.iconSize = new GSize(20, 32);
	icon4.shadowSize = new GSize(32, 30);
	icon4.iconAnchor = new GPoint(10, 30);
	icon4.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_4"] = icon4;

	var icon5 = new GIcon(); 
	icon5.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon5.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon5.iconSize = new GSize(20, 32);
	icon5.shadowSize = new GSize(32, 30);
	icon5.iconAnchor = new GPoint(10, 30);
	icon5.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_5"] = icon5;

	var icon6 = new GIcon(); 
	icon6.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon6.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon6.iconSize = new GSize(20, 32);
	icon6.shadowSize = new GSize(32, 30);
	icon6.iconAnchor = new GPoint(10, 30);
	icon6.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_6"] = icon6;

	var icon7 = new GIcon(); 
	icon7.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon7.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon7.iconSize = new GSize(20, 32);
	icon7.shadowSize = new GSize(32, 30);
	icon7.iconAnchor = new GPoint(10, 30);
	icon7.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_7"] = icon7;

	var icon8 = new GIcon(); 
	icon8.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon8.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon8.iconSize = new GSize(20, 32);
	icon8.shadowSize = new GSize(32, 30);
	icon8.iconAnchor = new GPoint(10, 30);
	icon8.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_8"] = icon8;

	var icon9 = new GIcon(); 
	icon9.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon9.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon9.iconSize = new GSize(20, 32);
	icon9.shadowSize = new GSize(32, 30);
	icon9.iconAnchor = new GPoint(10, 30);
	icon9.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_9"] = icon9;

	var icon10 = new GIcon(); 
	icon10.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon10.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon10.iconSize = new GSize(20, 32);
	icon10.shadowSize = new GSize(32, 30);
	icon10.iconAnchor = new GPoint(10, 30);
	icon10.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_10"] = icon10;

	var icon11 = new GIcon(); 
	icon11.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon11.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon11.iconSize = new GSize(20, 32);
	icon11.shadowSize = new GSize(32, 30);
	icon11.iconAnchor = new GPoint(10, 30);
	icon11.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_11"] = icon11;

	var icon12 = new GIcon(); 
	icon12.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon12.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon12.iconSize = new GSize(20, 32);
	icon12.shadowSize = new GSize(32, 30);
	icon12.iconAnchor = new GPoint(10, 30);
	icon12.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_12"] = icon12;

	var icon13 = new GIcon(); 
	icon13.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon13.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon13.iconSize = new GSize(20, 32);
	icon13.shadowSize = new GSize(32, 30);
	icon13.iconAnchor = new GPoint(10, 30);
	icon13.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_13"] = icon13;

	var icon14 = new GIcon(); 
	icon14.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon14.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon14.iconSize = new GSize(20, 32);
	icon14.shadowSize = new GSize(32, 30);
	icon14.iconAnchor = new GPoint(10, 30);
	icon14.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_14"] = icon14;

	var icon15 = new GIcon(); 
	icon15.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon15.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon15.iconSize = new GSize(20, 32);
	icon15.shadowSize = new GSize(32, 30);
	icon15.iconAnchor = new GPoint(10, 30);
	icon15.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_15"] = icon15;

	var icon16 = new GIcon(); 
	icon16.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon16.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon16.iconSize = new GSize(20, 32);
	icon16.shadowSize = new GSize(32, 30);
	icon16.iconAnchor = new GPoint(10, 30);
	icon16.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_16"] = icon16;

	var icon17 = new GIcon(); 
	icon17.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon17.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon17.iconSize = new GSize(20, 32);
	icon17.shadowSize = new GSize(32, 30);
	icon17.iconAnchor = new GPoint(10, 30);
	icon17.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_17"] = icon17;

	var icon18 = new GIcon(); 
	icon18.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon18.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon18.iconSize = new GSize(20, 32);
	icon18.shadowSize = new GSize(32, 30);
	icon18.iconAnchor = new GPoint(10, 30);
	icon18.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_18"] = icon18;

	var icon19 = new GIcon(); 
	icon19.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon19.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon19.iconSize = new GSize(20, 32);
	icon19.shadowSize = new GSize(32, 30);
	icon19.iconAnchor = new GPoint(10, 30);
	icon19.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_19"] = icon19;

	var icon20 = new GIcon(); 
	icon20.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_blue.png';
	icon20.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon20.iconSize = new GSize(20, 32);
	icon20.shadowSize = new GSize(32, 30);
	icon20.iconAnchor = new GPoint(10, 30);
	icon20.infoWindowAnchor = new GPoint(1, 1);
	customIcons["ideal_max_20"] = icon20;

	var icon_places = new GIcon(); 
	icon_places.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_places.png';
	icon_places.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon_places.iconSize = new GSize(20, 34);
	icon_places.shadowSize = new GSize(32, 30);
	icon_places.iconAnchor = new GPoint(10, 30);
	icon_places.infoWindowAnchor = new GPoint(1, 1);
	customIcons["places"] = icon_places;

	var icon_cocoon = new GIcon(); 
	icon_cocoon.image = 'http://www.cocoonbarcelona.com/img/gooMap/marker_cocoon.png';
	icon_cocoon.shadow = 'http://www.google.com/mapfiles/shadow50.png';
	icon_cocoon.iconSize = new GSize(20, 32);
	icon_cocoon.shadowSize = new GSize(32, 30);
	icon_cocoon.iconAnchor = new GPoint(10, 30);
	icon_cocoon.infoWindowAnchor = new GPoint(1, 1);
	customIcons["cocoon"] = icon_cocoon;

	var _markerGroups = new Array();
	var markerGroups = { "ideal_max_1": [], "ideal_max_2": [], "ideal_max_3": [], "ideal_max_4": [], "ideal_max_5": [],
							 "ideal_max_6": [], "ideal_max_7": [], "ideal_max_8": [], "ideal_max_9": [], 
							 "ideal_max_10": [], "ideal_max_11": [], "ideal_max_12": [], "ideal_max_13": [], 
							 "ideal_max_14": [], "ideal_max_15": [], "ideal_max_16": [], "ideal_max_17": [], 
							 "ideal_max_18": [], "ideal_max_19": [], "ideal_max_20": [], 
							 "all": [], "places":[], "cocoon":[]};
							 
	var markers = new Array();
	var map;

	
    function initialize() { // ======================================
      if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map_canvas"));
		if (markerdata_centerX=='' || markerdata_centerY=='')
			map.setCenter(new GLatLng(41.407329617123985, 2.1857643127441406), 12);
		else
			map.setCenter(new GLatLng(markerdata_centerY, markerdata_centerX), 16);

		map.enableScrollWheelZoom();
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());
		map.addControl(new GOverviewMapControl());
		
		map.setMapType(G_NORMAL_MAP);


        GDownloadUrl(markerdata_url, function(data) {
          		var xml = GXml.parse(data);
          		markers = xml.documentElement.getElementsByTagName("marker");
          		var debug_html = '';
          		for (var i = 0; i < markers.length; i++){ 
				var type = markers[i].getAttribute("type");
            		var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));	
		  		var tipHtml = GXml.value(markers[i].getElementsByTagName("tip")[0]);
            		var marker = createMarker(point, tipHtml,type,markers[i]);
				map.addOverlay(marker);
	          }
          		//$('#debug').html(debug_html);
          		
	});


      }
            		$('#debug').html(_markerGroups.length);
    } // end - function initialize() ===================================
    
    

	function createMarker(point,htmls,type,marker_object) {
		var marker;
		if (type) {
			marker = new GMarker(point, customIcons[type]);
			markerGroups[type].push(marker);
			if (_markerGroups[type]===undefined){
				var j = 0; 
				_markerGroups[type]= new Array();
			}else{ 
				var j = _markerGroups[type].length;
			}
			_markerGroups[type][j] = marker_object;
		}else{
			marker = new GMarker(point);
		}

		GEvent.addListener(marker, 'click', function() {
			//marker.openInfoWindowHtml(htmls);
			if (type=='places') 	var id_window = "tooltip_window_places" 
			else					var id_window = "tooltip_window"
			marker.openExtInfoWindow(map,
				id_window,
				htmls,
      			{beakOffset: 9}
    			);
		});
		return marker;
	}


	function toggleGroup1(type) {
		for (var i = 0; i < markerGroups[type].length; i++) {
			var marker = markerGroups[type][i];
			if (marker.isHidden()) {
				marker.show();
			} else {
				marker.hide();
			}
		}
	}
    

	function js_move_zone(){
		map.closeExtInfoWindow();
		var idz=parseInt($('#select_zone').val());
		if (idz==0){
			map.setCenter(new GLatLng(41.407329617123985, 2.1857643127441406), 12);
		}else if(idz==1){ // barri gotic 
			map.setCenter(new GLatLng(41.381638800272555, 2.176237106323242), 15);
		}else if(idz==5){ // raval 
			map.setCenter(new GLatLng(41.381059191065525, 2.1692419052124023), 15);
		}else if(idz==6){ // born 
			map.setCenter(new GLatLng(41.38720922534034, 2.184004783630371), 15);
		}else if(idz==7){ // eixample 
			map.setCenter(new GLatLng(41.3962561241472, 2.17529296875), 13);
		}else if(idz==8){ // barceloneta 
			map.setCenter(new GLatLng(41.38035077279714, 2.1904420852661133), 15);
		}else if(idz==9){ // gracia 
			map.setCenter(new GLatLng(41.40636398063092, 2.1679115295410156), 14);
		}else if(idz==10){ // poble sec 
			map.setCenter(new GLatLng(41.37316955207654, 2.164778709411621), 15);
		}else if(idz==23){ // beach 
			map.setCenter(new GLatLng(41.389945964560695, 2.217693328857422), 13);
		}else if(idz==19){ // historical center 
			map.setCenter(new GLatLng(41.384472370921266, 2.175464630126953), 14);
		}else if(idz==24){ // ramblas 
			map.setCenter(new GLatLng(41.38096258902878, 2.174863815307617), 15);
		}else if(idz==25){ // sants station 
			map.setCenter(new GLatLng(41.37906271981136, 2.1410036087036133), 15);
		}else if(idz==26){ // plaza catalunya
			map.setCenter(new GLatLng(41.38791756889401, 2.1698427200317383), 15);
		}else if(idz==27){ // montjuic 
			map.setCenter(new GLatLng(41.367855582447056, 2.156496047973633), 14);
		}else if(idz==28){ // passeig de gracia 
			map.setCenter(new GLatLng(41.392231858431515, 2.16555118560791), 15);
		}else if(idz==29){ // fira 
			map.setCenter(new GLatLng(41.37513400064783, 2.1504878997802734), 15);
		}else if(idz==30){ // sagrada familia 
			map.setCenter(new GLatLng(41.4031128989485, 2.174563407897949), 15);
		}
	}

	function js_refresh_markers(){
		map.closeExtInfoWindow();
		// hide the aparts with inferior capacity
		var pax = parseInt($('#select_pax').val());
		for (var ia=1 ; ia<pax; ia++){
			var type = 'ideal_max_'+ia;
			for (var im=0; im<markerGroups[type].length; im++) markerGroups[type][im].hide();
		}
		// show the aparts with enough capacity
		var debug_html = '';
		var prix_limit = parseInt($('#select_price').val()); 
		var category_selected = parseInt($('#select_category').val()); 
		for (var ia=pax ; ia<21; ia++){ 
			var type = 'ideal_max_'+ia;
			for (var im=0; im<markerGroups[type].length; im++){
				var prix = parseInt(_markerGroups[type][im].getAttribute("prix"));
				var category = parseInt(_markerGroups[type][im].getAttribute("category"));
				if (prix<prix_limit && (category==category_selected || category_selected==0) ){
					markerGroups[type][im].show();
					//debug_html +=  ' <br />pax '+ia+' <b>' + prix + ' &lt; ' + prix_limit + '</b>';
				}else{
					markerGroups[type][im].hide();
					//debug_html +=  ' <br />pax '+ia+' ' + prix + ' &gt; ' + prix_limit;
				}
            		//$('#debug').html(debug_html);
			}
		}
		// show the touristic places markers
		for (var im=0; im<markerGroups['places'].length; im++) markerGroups['places'][im].show();
	}