//controls the main area slides
cur_mainArea = 1;
z_mainArea = 10;
function changeMain(mainArea){
	
	$("#top_pop_1").css("background-image", "url(images/home/pop_back.png)");
	$("#top_pop_2").css("background-image", "url(images/home/pop_back.png)");
	$("#top_pop_3").css("background-image", "url(images/home/pop_back.png)");
	$("#top_pop_" + mainArea).css("background-image", "url(images/home/pop_back_hover.png)");
	$("#top_connector").css("background-image", "url(images/home/connect_" + mainArea + ".png)");
	z_mainArea++;
	$('#top_mainarea_' + mainArea).css("z-index",z_mainArea);
	
	if(mainArea == 1){
		if (cur_mainArea != 1){
			$('#top_mainarea_' + cur_mainArea).animate({ opacity: 0  });	
			$('#top_mainarea_1').animate({ opacity: 1  });					
		}
	} else if(mainArea == 2){
		if (cur_mainArea != 2){
			$('#top_mainarea_' + cur_mainArea).animate({ opacity: 0  });
			$('#top_mainarea_2').animate({ opacity: 1  });	
		}
	}else if(mainArea == 3){
		if (cur_mainArea != 3){
			$('#top_mainarea_' + cur_mainArea).animate({ opacity: 0  });
			$('#top_mainarea_3').animate({ opacity: 1  });				
		}	
	}
		
	cur_mainArea = mainArea;	
}
	$('#top_mainarea_3').animate({ opacity: 0  });	
	$('#top_mainarea_2').animate({ opacity: 0  });	

//controls mouse over on the map
var mouseX, mouseY;

jQuery(document).ready(function(){
   $("#top_mainarea_1").mousemove(function(e){
      mouseX = e.pageX+15;
	  mouseY = e.pageY-25;
   }); 
})


function map_hover(linkText){
	$("#tooltip").css('display', 'inline' ); 
	$("#tooltip").html("Visit " + linkText);
	$('#tooltip').css('top', mouseY );  
	$('#tooltip').css('left', mouseX );  
	$("#map_text_hover_1").html("<a href='http://www." + linkText + "'>Visit " + linkText + "</a>");
}	

function map_hover_out(){
	$("#tooltip").html("");
	$("#tooltip").css('display', 'none' ); 

}	

if (GBrowserIsCompatible()) {	
	var map = new GMap2(document.getElementById("helloMap"));
	map.enableContinuousZoom(); 
	map.enableScrollWheelZoom();
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());		
    map.addControl(new GOverviewMapControl());
	
	var gmarkers = [];
	var i = 0;	
	var bounds = new GLatLngBounds();
	var popHTML = [];
	var click_flag = false;
    var ICONS = [];
    var mgr = null;
	var temp = null;
	var point = null;


    var icon = new GIcon();
    
    icon.image = "/images/icons/globe30x30.png";
    icon.iconAnchor = new GPoint(18, 18);
    icon.infoWindowAnchor = new GPoint(1,1);
    icon.iconSize = new GSize(30, 30);
    icon.shadow = "";
    ICONS[0] = icon;
	var myCluster = new ClusterMarker(map,{clusterMarkerIcon:icon,clusteringEnabled:false});
	myCluster.intersectPadding=0;
	
    var icon = new GIcon();
    icon.image = "/images/icons/dot_9x9.png";
    icon.iconAnchor = new GPoint(7, 7);
    icon.infoWindowAnchor = new GPoint(1, 1);
    icon.iconSize = new GSize(9, 9);
    icon.shadow = "";
    ICONS[1] = icon;
	var myCluster2 = new ClusterMarker(map,{clusterMarkerIcon:icon});
	myCluster2.intersectPadding=3;
	myCluster2.clusterMarkerClick = function(args){
		map.setCenter(args.clusterMarker.getLatLng(), 9);
	};
	myCluster2.clusterMarkerTitle='Zoom in to see more HelloMetro sites.';
			
	var zoomIcon=["50","50","50","50","50","35","20","20","20","500","500","500","500","500","500","50","50","50","50","50"];	






GEvent.addListener(map, "moveend", function() {
	if (click_flag == false) {
		
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		
		$.get("/ajax/getCitiesByRange.cfm?amount=1000&NE_long=" + northEast.lng() + "&NE_Lat=" + northEast.lat() + "&SW_long=" + southWest.lng() + "&SW_Lat=" + southWest.lat() + "", function(data){
			jsonResults = json_parse(data);
			
			var batch = [];
			
			for (i = 0; i < jsonResults["ROWCOUNT"] && i < zoomIcon[map.getZoom()]; i++) {
				icon_i = 0;

				popHTML[i] = new GMarker(new GLatLng(jsonResults['DATA']['LAT'][i], jsonResults['DATA']['LONG'][i]), {icon: ICONS[icon_i]});
				cityURL = jsonResults['DATA']['CITYURL'][i];
				eval(' GEvent.addListener(popHTML[i], "click", function() { window.open("http://www.'+ cityURL +'");	});');
				eval(' GEvent.addListener(popHTML[i], "mouseover", function() {map_hover("' + cityURL + '"); });');
				eval(' GEvent.addListener(popHTML[i], "mouseout", function() {map_hover_out(); });');
				batch.push(popHTML[i]);
			}

			myCluster.removeMarkers();
			myCluster.addMarkers(batch);
			myCluster.refresh();

			var batch = [];
			
			for (i = zoomIcon[map.getZoom()]; i < jsonResults["ROWCOUNT"]; i++) {
				
				icon_i = 1;

				popHTML[i] = new GMarker(new GLatLng(jsonResults['DATA']['LAT'][i], jsonResults['DATA']['LONG'][i]), {icon: ICONS[icon_i]});
				cityURL = jsonResults['DATA']['CITYURL'][i];
				eval(' GEvent.addListener(popHTML[i], "click", function() { window.open("http://www.'+ cityURL +'");	});');
				eval(' GEvent.addListener(popHTML[i], "mouseover", function() {map_hover("' + cityURL + '"); });');
				eval(' GEvent.addListener(popHTML[i], "mouseout", function() {map_hover_out(); });');
				batch.push(popHTML[i]);
			}
			
			myCluster2.removeMarkers();
			myCluster2.addMarkers(batch);
			myCluster2.refresh();
			
		});
	}else{
		click_flag = false;
	}
});



map.setCenter(new GLatLng(38, -97), 4);

				
								
				// ===== determine the zoom level from the bounds =====
				//map.setZoom(map.getBoundsZoomLevel(bounds));	
				// ===== determine the centre from the bounds ======
				//map.setCenter(bounds.getCenter());		
			} else {
				alert('Sorry, the Google Maps API is not compatible with this browser');
			}