var map;
 var gmarkers = [];
 var page=1;
 var Icon;
 var tooltip;

 function init_google_map(){
    
      if (GBrowserIsCompatible()) {
	      map = new GMap2(document.getElementById("map"));
	      map.enableScrollWheelZoom();
	      map.enableContinuousZoom();
	      map.addControl(new GSmallZoomControl() );
	      map.setCenter(new GLatLng(latitude,longitude),10);
	 
	      
	      Icon = new GIcon();
	      Icon.iconSize = new GSize(15,25);
	      Icon.shadowSize  = new GSize(15,10);
	      Icon.image = "/images/googlemaps/redv3.png";
	      Icon.iconAnchor = new GPoint(7,26);
	      
	      tooltip = document.createElement("div");
	      document.getElementById("map").appendChild(tooltip);
	      tooltip.style.visibility="hidden";
	      
	      place_marker();	
	      mapMoved(1);
	      
	      GEvent.addListener(map, "moveend", function () {
		      page=1;
		      //map.clearOverlays();
		     mapMoved(page);
		}
		 ); 
	    //replaceMarker();
      }
	    
      // display a warning if the browser was not compatible
      else {
	 alert("Sorry, the Google Maps API is not compatible with this browser");
      }
    

    
	  
		   // var geonameid=12313;//<%=@city.first.geonameid%>;
	      // Display the map, with some controls and set the initial location
	      
	     // map.addMapType(G_PHYSICAL_MAP);
	      
	      //map.addControl(new GScaleControl());
	 
	    // map.addControl(new GMapTypeControl());
	  //   map.setCenter(new GLatLng(<%#=@city.first.lat%>,<%#=@city.first.lng%>),10);
   	

	     //  map.setZoom(8);
	   
	      
	      //var gmarkers = [];
	      //var htmls = [];
	      

	      

    
    }
    function place_marker(){
	    
	    
	    var point = new GLatLng(latitude,longitude);
	    var Icon_marker = new GIcon();
	    Icon_marker.iconSize = new GSize(15,25);
	    Icon_marker.shadowSize  = new GSize(15,10);
	    Icon_marker.image = "/images/googlemaps/yellowv3.png";
	    Icon_marker.iconAnchor = new GPoint(7,26);
	    var mark = new GMarker(point,Icon_marker);
	     
	    
	    
	  mark.tooltip = '<div class="tooltip"><div class="tooltipname"><nobr>' + geoname + '<\/nobr> <\/div><\/div>';
	    
	    // Switch  on marker mouseover and mouseout
	    //mark.setImage("/images/googlemaps/yellowv3.png");

	    GEvent.addListener(mark, "mouseover", function() {
	            mark.setImage("/images/googlemaps/redv3.png");
		    showTooltip(mark);
	    });
	    
	    GEvent.addListener(mark, "mouseout", function() {
		    tooltip.style.visibility="hidden";
		    mark.setImage("/images/googlemaps/yellowv3.png");
	    });

	    
	    map.addOverlay(mark);
	    
	    //   map.panTo(new GLatLng(marker.lng, marker.lng));
    }
    
    function showTooltip(marker) {
      	tooltip.innerHTML = marker.tooltip;
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor=marker.getIcon().iconAnchor;
	var width=marker.getIcon().iconSize.width;
	var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width - 40,- offset.y + point.y +anchor.y-10)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
      }

  function mapMoved(page){
	//map.clearOverlays();
	//var map = new GMap2(document.getElementById("map"));
	theBounds = map.getBounds();
	var zoom=map.getZoom();
	gmarkers = [];
	htmls = [];
	i = 0;
	side_bar_html = "";
	var lat=map.getCenter().lat();
	var lng=map.getCenter().lng();
	 
	//<%#= remote_function( :url => {:controller => 'weather',  :action => 'boundsSmall' }, :with =>"'swpointy=' + theBounds.getSouthWest().y+'&swpointx='+theBounds.getSouthWest().x+'&nepointy='+theBounds.getNorthEast().y +'&nepointx='+theBounds.getNorthEast().x+'&zoom='+zoom+'&page='+page+'&centerlat='+lat+'&centerlng='+lng+'&geonameid='+geonameid", :complete   =>  "data(request.responseText); ") %>
	new Ajax.Request('/weather/boundsSmall', {asynchronous:true, evalScripts:true, 
			onSuccess:function(request){data(request.responseText); },
			//onException: function(req,exception) {alert("Error" +exception +req);return true;},
			//onFailure: function(request) {alert("The request had a fatal exception thrown.\n\n" +request);},
			parameters:'swpointy=' + theBounds.getSouthWest().y+'&swpointx='+theBounds.getSouthWest().x+'&nepointy='+theBounds.getNorthEast().y +'&nepointx='+theBounds.getNorthEast().x+'&zoom='+zoom+'&page='+page+'&centerlat='+lat+'&centerlng='+lng+'&geonameid='+geonameid + '&authenticity_token=' + encodeURIComponent(token)})
   	}

    function data(marker){
	    
	    marker =eval('('+marker+')');
	    for(var i=0; i< marker.allcities.length; i++){
		  place_marker_bounds(marker.allcities[i]);
	    }
    }

    function place_marker_bounds(marker){
	    
	    var point = new GLatLng(marker.lat,marker.lng);
	    
	    var mark = new GMarker(point,Icon);
	    
	    gmarkers[i] = mark;
	    mark.tooltip = '<div class="tooltip"><div class="tooltipname"><nobr>'+marker.name+'</nobr><\/div><\/div>';
	    
	    // Switch  on marker mouseover and mouseout
	    GEvent.addListener(mark, "click", function() {
		    self.location.href = "/"+marker.url.gsub(" ","-").toLowerCase();
	    });
	    
	    GEvent.addListener(mark, "mouseover", function() {
		    mark.setImage("/images/googlemaps/yellowv3.png");
		    showTooltip(mark);
	    });
	    GEvent.addListener(mark, "mouseout", function() {
		    tooltip.style.visibility="hidden";
		    mark.setImage("/images/googlemaps/redv3.png");
	    });
	    
	  //  toggle = (toggle== 0) ? 1 :0;
	    
	   // side_bar_html += '<a href="/'+marker.country.gsub(" ","-").toLowerCase()+'/'+marker.state.gsub(" ","-").toLowerCase()+"/"+marker.city.gsub(" ","-").toLowerCase()+'/'+marker.name.gsub(" ","-").toLowerCase()+' " ><div class="sidebar" id="sidebar-'+i+'" onmouseover="mouseover('+i+');gmarkers['+i+'].setImage(\'/images/googlemaps/yellowv3.png\');tooltipover(' + i + ');" onmouseout="mouseout('+i+');tooltipout();gmarkers['+i+'].setImage(\'/images/googlemaps/redv3.png\');" >' + marker.name + '</div><\/a>';
	    i++;
	    map.addOverlay(mark);
	    	  
	    //   map.panTo(new GLatLng(marker.lng, marker.lng));
    }
   
    function showTooltip(marker) {
      	tooltip.innerHTML = marker.tooltip;
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor=marker.getIcon().iconAnchor;
	var width=marker.getIcon().iconSize.width;
	var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width - 40,- offset.y + point.y +anchor.y)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
      }

      function tooltipover(i) {
        showTooltip(gmarkers[i]);
      }
      
      function tooltipout() {
	      tooltip.style.visibility="hidden";
      }

       window.onload = init_google_map;