var min=8;
var max=16;
function increaseFontSize() {
   var p = document.getElementsByTagName('body');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('body');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}

$(document).ready(function(){

aggiornaMappa('test', '40.3533120778367','18.174047470092773', '40.32102735725733', '18.115768432617188', '40.3856510838161', '18.232498168945312', 13);

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
	if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
		$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
		$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
	}
	return false; //Prevent the browser jump to the link anchor
});

});

function aggiornaMappa(poiType, latCent, lonCent, latSW, lonSW, latNE, lonNE, zoom){
		
		$.getJSON("?rt=poi/loadPoi&poiType=" + poiType + "&latSW=" + latSW + "&lonSW=" + lonSW + "&latNE=" + latNE + "&lonNE=" + lonNE,
        function(data){

		$("#list").empty();
		$("#map").empty();
		$("#poi_list_counter").empty();
		
		$("#message").hide();
			
		
			//Display Loading Image
			function Display_Load()
			{
			$("#loading").fadeIn(900,0);
			$("#loading").html("<img src=\"images/ajax-loader3.gif\" />");
			}
			//Hide Loading Image
			function Hide_Load()
			{
			$("#loading").fadeOut('slow');
			};
	
	
			Display_Load();

			var custIcon = new GIcon(G_DEFAULT_ICON);  
				custIcon.iconSize = new GSize(32.0, 37.0);  
				custIcon.shadowSize = new GSize(51.0,37.0);  
				custIcon.iconAnchor = new GPoint(16.0, 37.0);
				custIcon.shadow = "images/shadow-poi.png";
				
				
				var myIcons = [];
				myIcons['house'] = new GIcon(custIcon, 'images/home.png');
				myIcons['africa'] = new GIcon(custIcon, 'images/selected.png');
				
				
			
			
				var map = new GMap2($("#map").get(0));
				var lecceIta = new GLatLng(latCent,lonCent);
				map.setCenter(lecceIta, zoom);
				
				
				var bounds = map.getBounds();
				var southWest = bounds.getSouthWest();
				var northEast = bounds.getNorthEast();
				var lngSpan = northEast.lng() - southWest.lng();
				var latSpan = northEast.lat() - southWest.lat();
				var markers = [];
				var poiNames = [];
			
			
				$.each(data, function(i,item){

					var point = new GLatLng(item.poiLat,item.poiLon);
					marker = new GMarker(point, { icon: myIcons['house'], shadow : 'images/shadow-poi.png'});
					
					map.addOverlay(marker);
					markers[i] = marker;
					poiNames[i] = item.poiName;
					
				});		
					
			
				
				
				$(markers).each(function(i,marker){
				
						$("<div class=\"poi\"/>")
							.html(
								"<img src=\"images/noimage.png\" class=\"archive-post-date\">" +


							"<div class=\"archive-post-title\">" +
								"<h5>" + poiNames[i] + "</h5>" +
								"<div class=\"post-date\">Visualizza scheda completa <a href=\"#\">qui</a></div>" +
							"</div>"+

							"<div class=\"clearer\">&nbsp;</div><div class=\"archive-separator\"></div>"
							
							)
							.click(function(){
								displayPoint(marker, i);
							})
							.mouseover(function(){
								marker.setImage("images/selected.png");
							})
							.mouseout(function(){
								 marker.setImage("images/home.png");
							})
							.appendTo("#list");
						
						GEvent.addListener(marker, "click", function(){
						
							showWindow(marker, i);
							
						});
						
						// Switch icon on marker mouseover and mouseout
						GEvent.addListener(marker, "mouseover", function() {
						  marker.setImage("images/selected.png");
						});
						GEvent.addListener(marker, "mouseout", function() {
						  marker.setImage("images/home.png");
						});

						
						
					
				});
				
			
            	
				
				
				function showWindow(marker, index){
				
				poiNames[index] = poiNames[index].replace(" ", "%20");
						
						$.openDOMWindow({
							loader:1, 
							loaderImagePath:'images/ajax-loader3.gif', 
							loaderHeight:16, 
							loaderWidth:17,
							overlayColor: '#DDEDF7',
							windowSource: 'ajax',
							windowSourceURL : '?rt=poi/loadPoiInfo&poiName=' + poiNames[index] + '&lat=' + marker.getLatLng().lat() +'&lng=' + marker.getLatLng().lng(),
							windowSourceAttrURL : 'href'
						}); 
				
				}
				
				$("#message").appendTo(map.getPane(G_MAP_FLOAT_PANE));
				
				
				function displayPoint(marker, index){
				
				

				
				$("#message").hide();
				
					var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
						$("#message")
							.html(poiNames[index])
							.fadeIn()
							.css({ top:markerOffset.y, left:markerOffset.x })
						
					//marker.openInfoWindowHtml("<p>" + poiNames[index] + "</p>");
					//map.panTo(marker.getLatLng());
					
					
				}
				
				map.addControl(new TextualZoomControl());
				
				Hide_Load();				
          
		 /* Funzione utilizzata per paginare i poi nella griglia a destra della mappa */
		$(function(){
			$("#list .poi").quickpaginate({ perpage: 5, showcounter: true, pager : $("#poi_list_counter") });
		});
		
		
		/* Listener scatenato ogni volta che cambio posizione sulla mappa (sia in 'zoom' che in 'pan') */
		GEvent.addListener(map, 'moveend', function(){
						
			var bounds = map.getBounds();
			var southWest = bounds.getSouthWest();
			var northEast = bounds.getNorthEast();
			var center = map.getCenter();

			aggiornaMappa(poiType, center.lat(), center.lng(), southWest.lat(), southWest.lng(), northEast.lat(), northEast.lng(), map.getZoom());
							
		});
		
		
		  
        });
		

		}
		// A TextualZoomControl is a GControl that displays textual "Zoom In"
		// and "Zoom Out" buttons (as opposed to the iconic buttons used in
		// Google Maps).

		// We define the function first
		function TextualZoomControl() {
		}

		// To "subclass" the GControl, we set the prototype object to
		// an instance of the GControl object
		TextualZoomControl.prototype = new GControl();

		// Creates a one DIV for each of the buttons and places them in a container
		// DIV which is returned as our control element. We add the control to
		// to the map container and return the element for the map class to
		// position properly.
		TextualZoomControl.prototype.initialize = function(map) {
		  var container = document.createElement("div");

		  var zoomInDiv = document.createElement("div");
		  this.setButtonStyle_(zoomInDiv);
		  container.appendChild(zoomInDiv);
		  
		  var img = document.createElement("IMG");
		  img.src="images/zoom-in-icon.png";
  
		  zoomInDiv.appendChild(img);
		  
		  //zoomInDiv.appendChild(document.createTextNode("Zoom In"));
		  GEvent.addDomListener(zoomInDiv, "click", function() {
			map.zoomIn();
		  });

		  var zoomOutDiv = document.createElement("div");
		  this.setButtonStyle_(zoomOutDiv);
		  container.appendChild(zoomOutDiv);
		 // zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
		 
		  var img2 = document.createElement("IMG");
		  img2.src="images/zoom-out-icon.png";
  
		  zoomOutDiv.appendChild(img2);
		  
		  GEvent.addDomListener(zoomOutDiv, "click", function() {
			map.zoomOut();
		  });

		  map.getContainer().appendChild(container);
		  return container;
		}

		// By default, the control will appear in the top left corner of the
		// map with 7 pixels of padding.
		TextualZoomControl.prototype.getDefaultPosition = function() {
		  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
		}

		// Sets the proper CSS for the given button element.
		TextualZoomControl.prototype.setButtonStyle_ = function(button) {
		  button.style.border = "1px solid green";
		  button.style.marginBottom = "3px";
		  button.style.textAlign = "center";
		  button.style.cursor = "pointer";
		}