var map = null;
var mgr = null;

function setupMap() {
	if (GBrowserIsCompatible()) {
		if (document.getElementById("map_canvas")) {
				
				map = new GMap2(document.getElementById("map_canvas"));
				map.setCenter(new GLatLng(35.64636615, 139.73137035), 10);
	
				var customUI = map.getDefaultUI();
				customUI.controls.menumaptypecontrol = true;
				map.setUI(customUI);
				
				mgr = new MarkerManager(map, {trackMarkers:true});
				
				redrawGMap();
				//$("#refreshMap").trigger('click');
		}
	}
}

var html = '<div id="map_loader" style="z-index: 999; position:relative; margin:0 auto; top:0; margin-top: 108px; width: 32px; height:32px; padding: 10px; border: 1px dotted #666; background-color:#fff;"><img src="/images/ajax-loader.gif" /></div>';

$(document).ready(function() {
	$("#state").change(onSelectChange);
	$("#refreshMap").click(redrawGMap);
	
	$("#state").trigger("change");
	
	$("#map_canvas").ajaxStart(function() {
		$(this).prepend(html);
	});
	$("#map_canvas").ajaxComplete(function() {
		$("#map_loader").remove();
	});
});

function onSelectChange(){
	var type = $(this).attr('id');
	var lang = $(this).attr('class');
	var selected = $(this).find(":selected");
	if(selected.val() != 0){
		$.getJSON("/gmap/get",{ t: type, v: selected.val(), lang: lang },
			function(data){
				  var options = '';
				  $.each(data, function(i,item){
					 if(i==0){
						 var selected = 'selected="selected"';
					 }
					 options += '<option '+selected+' value="' + item.id + '">' + item.Translation[lang].name + '</option>';
	              });	        	  
	        	  $("#city option").remove();
	              $("#city").html(options);
			});
	}
}

function redrawGMap(){
	var markers = [];
	var zoomLevel = 15;
	var citySelected = $("#city").find(":selected");
	var catSelected = $("#category").find(":selected");
	var stateSelected = $("#state").find(":selected");
	var lang = $("#state").attr('class');
	if(lang && stateSelected){
		$.getJSON("/gmap/get",{ t: 'getstores', city: citySelected.val(), cat:catSelected.val(), state: stateSelected.val(), lang: lang },
			function(data){
				  var options = '';
				  if(data){
					  $.each(data, function(i,item){
						  var marker = createMarker(item.gmap_lat,item.gmap_lng,item.cat_ancestor, item.category_id);
						  GEvent.addListener(marker, "click", function() {
							  if(item.Translation[lang].custom_url)
								  var url = item.Translation[lang].custom_url;
							  else
								  var url = '/'+lang+'/store/'+item.urlname;
							  
							  marker.openExtInfoWindow( map,
									  "gmap_window",
									  '<a href="'+url+'" target="_blank">'+item.Translation[lang].name+'</a>',
									  {beakOffset: 1}
									  );
						  });
						  markers.push(marker);
		              });
				  }else{
					  map.closeExtInfoWindow();
					  mgr.clearMarkers();
					  if(citySelected.val()){
						  $.getJSON("/gmap/get",{ t: 'city', city: citySelected.val() },
								function(data){
							  		if(data.lat && data.lng){
							  			cityLatLng = new GLatLng(data.lat, data.lng);
							  			map.setCenter(cityLatLng, zoomLevel); // no stores
							  		}
						  		});
					  }else if(stateSelected.val()==2 || stateSelected.val()==3){
						  if(stateSelected.val()==2)
				  			map.setCenter(new GLatLng('35.466158', '139.622412'), zoomLevel-2); // Kanagawa
						  else if(stateSelected.val()==3)
					  		map.setCenter(new GLatLng('35.612755', '140.114264'), zoomLevel-2); // Chiba					  
					  }
				  }
				  
				  if(markers.length != 0){
					  map.closeExtInfoWindow();
					  mgr.clearMarkers();
					  mgr.addMarkers(markers, 0);
					  mgr.refresh();
					  if(markers.length > 1){
						  // map: an instance of GMap2
						  // latlng: an array of instances of GLatLng
						  var latlngbounds = new GLatLngBounds();
						  for (var i = 0; i < markers.length; i++ ){
							latlngbounds.extend(markers[i].getLatLng());
						  }
						  
						  if(markers.length == 2 && markers[0].getLatLng().equals(markers[1].getLatLng())){
							  zoomLevel = zoomLevel+2;  // 2 stores same locations
						  }else if(markers.length == 2){
							  zoomLevel = map.getBoundsZoomLevel(latlngbounds)-1; // 2 stores different locations
						  }else{
							  zoomLevel = map.getBoundsZoomLevel(latlngbounds); // others
						  }
					   	  map.setCenter(latlngbounds.getCenter(), zoomLevel);
				      }else{
				    	  map.setCenter(markers[0].getLatLng(), zoomLevel+2); // Single store
				    	  map.panTo(markers[0].getLatLng());
				      }
				  }
			});
	}
}

function createMarker(lat, lng, cat_ancestor, cat_id){
	var icon = new GIcon(G_DEFAULT_ICON);
	if(cat_ancestor == 1){
		icon.image = "/images/gmap-icon/mall.png";
		icon.iconSize = new GSize(32, 37);
		icon.infoWindowAnchor = new GPoint(16, 0);
		icon.imageMap = [0,0 , 32,0, 32,37 , 0,37];
	}else if(cat_ancestor == 2){
		icon.image = "/images/gmap-icon/restaurant.png";
	    icon.iconSize = new GSize(32, 37);
	    icon.infoWindowAnchor = new GPoint(16, 0);
	    icon.imageMap = [0,0 , 32,0, 32,37 , 0,37];
	}else if(!cat_ancestor &&  cat_id == 20){
		icon.image = "/images/gmap-icon/departmentstore.png";
	    icon.iconSize = new GSize(32, 37);
	    icon.infoWindowAnchor = new GPoint(16, 0);
	    icon.imageMap = [0,0 , 32,0, 32,37 , 0,37];
	}else if(!cat_ancestor &&  cat_id == 21){
		icon.image = "/images/gmap-icon/music_live.png";
	    icon.iconSize = new GSize(32, 37);
	    icon.infoWindowAnchor = new GPoint(16, 0);
	    icon.imageMap = [0,0 , 32,0, 32,37 , 0,37];
	}else if(!cat_ancestor &&  cat_id == 22){
		icon.image = "/images/gmap-icon/lodging_0star.png";
	    icon.iconSize = new GSize(32, 37);
	    icon.infoWindowAnchor = new GPoint(16, 0);
	    icon.imageMap = [0,0 , 32,0, 32,37 , 0,37];
	}
	
	var posn = new GLatLng(lat, lng);
	var destMarker = new GMarker(posn, {
		icon : icon
	});
	return destMarker;
}