var tipologies;

function successTipology(responseTip){
	if (responseTip){
		tipologies = responseTip.tipologie;
	}
}

function errorTipology(responseTip){
	//error
}

API.getTypologies(successTipology, errorTipology);


function TipControl(controlList, tipologies, markers, searchedMarker, listLocals, map) {
  controlList.style.padding = '0';
  var controlUI;
  var controlBackgroundUI;
  //window.storedMarkers = markers.length > 0 ? markers : [];
  if (tipologies){
	for(var i = 0; i<tipologies.length; i++){
		controlBackgroundUI = document.createElement('div')
		controlBackgroundUI.className = "li-background";
		controlUI = document.createElement('li');
		controlUI.style.backgroundColor = '#fff';
		controlUI.style.textAlign = 'center';
		controlUI.title = tipologies[i].tipologia;
		controlUI.className = tipologies[i].id;
		controlBackgroundUI.appendChild(controlUI);
		controlList.appendChild(controlBackgroundUI);
		var controlText = document.createElement('p');
		controlText.innerHTML = '<b>' + tipologies[i].tipologia + '</b>';
		controlUI.appendChild(controlText);
		
		google.maps.event.addDomListener(controlBackgroundUI, 'mouseover', function(){
			$(this).addClass("hover");
			$(this).find('p').addClass("hover");
		});
		
		google.maps.event.addDomListener(controlBackgroundUI, 'mouseout', function(){
			$(this).removeClass("hover");
			$(this).find('p').removeClass("hover");
		});
		
		// Setup click-event listener: filter marker by tipology
		google.maps.event.addDomListener(controlUI, 'click', function() {
			var that = this;
			var currents = [];
			if(markers.length > 0){
				for (var elem in listLocals){
					if (parseInt(that.getAttribute("class")) == listLocals[elem].tipologia){
						current = listLocals[elem].nomelocale;
						currents.push(current);
					}
				}
				
				markers.forEach(function(marker) {
					if(marker.title != searchedMarker && $.inArray(marker.title, currents) == -1)
						marker.setMap(null);
					else if(marker.title != searchedMarker && $.inArray(marker.title, currents) != -1){
						marker.setMap(map);
						marker.setVisible(true);
					}
				});
			}
		});
	}
  }
}


function initAutocomplete() {
	var map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 41.9109, lng: 12.4818},
		zoom: 13,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	//google.maps.event.trigger(map, 'resize');
	// Create the search box and link it to the UI element.
	google.maps.event.trigger(map, 'resize');
	var input = document.getElementById('pac-input');
	var searchBox = new google.maps.places.SearchBox(input);
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
	
	// Bias the SearchBox results towards current map's viewport.
	map.addListener('bounds_changed', function() {
		searchBox.setBounds(map.getBounds());
	});

	var markers = [];
	
	// [START region_getplaces]
	// Listen for the event fired when the user selects a prediction and retrieve
	// more details for that place.
	searchBox.addListener('places_changed', function() {
		var places = searchBox.getPlaces();
		var lat = places[0].geometry.location.lat();
		var lng = places[0].geometry.location.lng();
		if (places.length == 0) {
		return;
		}
	
		// Clear out the old markers.
		markers.forEach(function(marker) {
		marker.setMap(null);
		});
		markers = [];
		var iconeBase = "images/";
	
		// For each place, get the icon, name and location.
		var bounds = new google.maps.LatLngBounds();
		
					
		places.forEach(function(place) {
		var icon = {
			url: place.icon,
			size: new google.maps.Size(71, 71),
			origin: new google.maps.Point(0, 0),
			anchor: new google.maps.Point(17, 34),
			scaledSize: new google.maps.Size(25, 25)
		};
		
		var iconSmart = {
			url: iconeBase + "base.png",
			size: new google.maps.Size(71, 71),
			origin: new google.maps.Point(0, 0),
			anchor: new google.maps.Point(17, 34),
			scaledSize: new google.maps.Size(25, 25),			
		};
	
		// Create a marker for each place.
		markers.push(new google.maps.Marker({
			map: map,
			icon: icon,
			title: place.name,
			position: place.geometry.location
		}));
		
		var myOptions = {
				disableAutoPan: false
				,pixelOffset: new google.maps.Size(-25, -5)
				,alignBottom: true
				,pane: "floatPane"
		};
		
		var infowindow = new google.maps.InfoWindow(myOptions);
		var i;
		var contents = [];
	
		function success(response){
			if (response){
				// Create the tipologies menu and link it to the UI element.
				if (!tipControlList){
					var tipControlList = document.createElement('ul');
					tipControlList.className = "tipologies-list";
					var tipControl = new TipControl(tipControlList, tipologies, markers, place.name, response.locals, map);
					map.controls[google.maps.ControlPosition.TOP_RIGHT].push(tipControlList);
				}
				for (i=0; i<response.locals.length; i++){
					markers.push(new google.maps.Marker({
						map: map,
						icon: iconSmart,
						title: response.locals[i].nomelocale,
						position: new google.maps.LatLng(parseFloat(response.locals[i].lat), parseFloat(response.locals[i].lon))
					}));
					var marker = markers[i+1];
					
					var name = response.locals[i].nomelocale ? response.locals[i].nomelocale : "";
					var rates = rating(response.locals[i].stelle);
					var charging = response.locals[i].n_punti_ricarica ? response.locals[i].n_punti_ricarica : 0;
					var description = response.locals[i].descrizione ? response.locals[i].descrizione : "";
					var address = response.locals[i].indirizzo ? response.locals[i].indirizzo : "";
					var email = response.locals[i].email ? response.locals[i].email : "";
					var site = response.locals[i].sito ? response.locals[i].sito : "";
					var idTip = response.locals[i].tipologia ? response.locals[i].tipologia : -1;
					var typName;
					
					for (var j=0; j<tipologies.length; j++){
						if (idTip > -1 && idTip == tipologies[j].id)
							typName = tipologies[j].tipologia;
					}
					
					var content = '<div id="content">'+
										'<div id="siteNotice">'+
										'</div>'+
										'<h1 id="firstHeading" class="firstHeading">' + name + '</h1>'+
										'<h4 id="secondHeading" class="secondHeading">' + typName + '</h4>' +
										'<div id="bodyContent">'+
											'<div id="rating">' + rates + '</div>' +											
											'<p>' + description + '</p>'+
											'<div id="charging"><p><b>Punti di ricarica: </b>' + charging + '</p></div>' +
											'<p><b>Indirizzo:</b> ' +  address + '</p>' +
											'<p><b>E-mail: </b>' + email + '</p>' +
											'<p><b>Sito: </b><a href="http://' + site + '" target="_blank">'+
											site + '</a></p>'+										
										'</div>'+
									'</div>';
					contents.push(content);
					google.maps.event.addListener(marker, 'click', (function(marker, i) {
							return function() {
									infowindow.setContent(contents[i]);
									infowindow.open(map, marker);
									infowindow.setPosition(new google.maps.LatLng(parseFloat(response.locals[i].lat), parseFloat(response.locals[i].lon)));
								}
					})(marker, i));
				}
			}
		}
		
		function error(response){
			//error
		}
		
		API.getLocali(-1, lat, lng, 10000, success, error);
		
		if (place.geometry.viewport) {
			// Only geocodes have viewport.
			bounds.union(place.geometry.viewport);
		} else {
			bounds.extend(place.geometry.location);
		}
		});
		map.fitBounds(bounds);
	});
	// [END region_getplaces]
}