//var token = "3UE9oKyubVzDh/mXFqqsGOtdBgCjdIB17nd99i7yLWVn3XSP+DVcrkuX/RJBw7AnbITSG7dNkmWSaPbuXW5UTO4Kenfq1BmbtGtvtAZLCdVa1REJg7cr4Q==";
	var token = 'EowsodBofQg8GRfuNIYujhZdfNfSucnHdMwUfstb9S4mR/flURhwoc9cwsRd0JLGjTKRHtHUp9lR5gHqyhgaiXWMcmb5ICu0';		
	var myGraphicsLayer;
	var lastOpenedType;
	
/*
 * 
createMarker/addMarker
removeMarker
initializeGMap
openInfoWindow
checkResizeMap
drawRadius

clearMapOverlay
 */
	// A function to create the marker and set up the event window
	function createMarker(pointLat,pointLong,name,html,image,id) 
	{				
		var pointGraphic = gMarkers[id];//point graphic
		
		try {
  		if (!pointGraphic) {
  			if(!(typeof image == 'undefined' || image == null || image == ""))
  			{
  				/*
  				var customIcon = new GIcon(baseIcon);
  				customIcon.image = 'http://google-maps-icons.googlecode.com/files/'+image+'.png';
  				var markerOptions = { icon:customIcon };
  				marker = new GMarker(point, markerOptions);
  				*/
  				var point1XY = pointLong + "," + pointLat; // "28968.1016,33560.975";
  			  pointGraphic=generatePointGraphic(point1XY, image+'.png', 'http://google-maps-icons.googlecode.com/files/');
  			  pointGraphic.symbol.width=32;
  				pointGraphic.symbol.height=37;
  				
  				
  			}
  			else
  			{			
  				// marker 	= new GMarker(point);
  				var pt = new esri.geometry.Point(pointLong,pointLat,map.map.spatialReference)				
  				var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
  				   new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
  				   new dojo.Color([255,0,0]), 1),
  				   new dojo.Color([0,255,0,0.25]));
  				pointGraphic = new esri.Graphic(pt,symbol);
  				pointGraphic.symbol.width=32;
  				pointGraphic.symbol.height=37;		
  			}
  			
  			html = '<div style="width:350px">' + html + '</div>';
  			
  			pointGraphic.attributes = new Object();
        pointGraphic.attributes['title'] = name;
        pointGraphic.attributes['content'] = html;
        		
  			// save the info we need to use later for the side_bar
  			gMarkers[id] = pointGraphic;
  			gMarkerHtmls[id] = html;
  			
  			myGraphicsLayer.add(pointGraphic);      
  			 			
  		}
		} 
		catch (allexc) {
			alert(allexc);
		}
		
		return pointGraphic;
	}

	function addMarker(k)
	{
		if(myGraphicsLayer==null)
    {
      myGraphicsLayer = new esri.layers.GraphicsLayer();
      map.map.addLayer(myGraphicsLayer); 
      myGraphicsLayer.onClick = onClickGraphic;         
    }
    
		for(var j=0; j<surroundData[k].length; j++)
		{					
			var arrayPoint = surroundData[k][j];				
			var pointId = arrayPoint[0];
			var pointTitle = arrayPoint[1];
			var pointDesc = arrayPoint[2];
			var pointLat = arrayPoint[3];
			var pointLong = arrayPoint[4];
			var pointImage = arrayPoint[5];
			var pointSrId = arrayPoint[6];
			var pointItemId = arrayPoint[7];
			
			if (pointId != '0') {  // point id '0' is for "No results found".
				// var gPoint = new GLatLng(pointLat, pointLong);
				//createMarker(gPoint, pointTitle,  
				//	'<div style="padding-bottom:8px"><b>'+pointTitle+'</b><br />'+pointDesc+ 
				//	'</div><div><a href="#" style="text-decoration:none; color:#336699" onClick="loadDetailWin(\'' + pointId + '\',\'' +
				//	pointTitle + '\', ' + pointSrId + ', \'' + pointItemId + '\'' +
				//	');return false;"><span style="font-weight:bold; padding-right:8px; vertical-align:middle">Show detail information</span><img src="../images/next.png" style="vertical-align:middle" /></a></div>',
				//	pointImage, pointId);
				
				if (pointId.indexOf('geourl')===0) {
				createMarker(pointLat, pointLong, pointTitle,   
					'<a href="#" style="text-decoration:none" onClick="window.open(\'' + pointDesc + '\'' +
					');return false;">' +
					'<div style="color:black; padding-bottom:8px">'+pointDesc+ '</div>' + 
					'<div><span style="color:#336699; font-weight:bold; padding-right:8px; vertical-align:middle">Open link URL</span><img src="../images/next.png" style="vertical-align:middle" /></div>' + 
					'</a>',
					pointImage, pointId);
				} else {
				
				createMarker(pointLat, pointLong, pointTitle,   
					'<a href="#" style="text-decoration:none" onClick="loadDetailWin(\'' + pointId + '\',\'' +
					pointTitle + '\', ' + pointSrId + ', \'' + pointItemId + '\'' +
					');return false;">' +
					'<div style="color:black; padding-bottom:8px">'+pointDesc+ '</div>' + 
					'<div><span style="color:#336699; font-weight:bold; padding-right:8px; vertical-align:middle">Show detail information</span><img src="../images/next.png" style="vertical-align:middle" /></div>' + 
					'</a>',
					pointImage, pointId);
				}
			}
		}
	}
	
	function removeMarker(pointGraphic) {
		if (myGraphicsLayer) {
      myGraphicsLayer.remove(pointGraphic);
      if(map.map.infoWindow.currentGraphic == pointGraphic){
      	map.map.infoWindow.hide();
      }
    }
	}
	    
	function drawRadius(lat, lng, rad) {
	    circleRadius = rad*1.0;
	    if (circle) {
	      myGraphicsLayer.remove(circle);
	    }
		 
	    var points = Array();
	
	    with (Math) {
	      var d;
	      if (bUseMiles) {
	      	d = circleRadius * 121380 /3956.091;    // mile to radian
	      } else {
	      	d = circleRadius * 121380 /6365.352;    // km to radian
	      }
	      var lat1 = (PI/180)* lat; // in radian
	      var lng1 = (PI/180)* lng; // in radian
	      for (var a = 0 ; a < 361 ; a++ ) {
	        var tc = (PI/180)*a;
	        var y = asin(sin(lat1)*cos(d)+cos(lat1)*sin(d)*cos(tc));
	        var dlng = atan2(sin(tc)*sin(d)*cos(lat1),cos(d)-sin(lat1)*sin(y));
	        var x = ((lng1-dlng+PI) % (2*PI)) - PI ; // MOD function
	        var lat2 = parseFloat(y*(180/PI));
	        var long2 = parseFloat(x*(180/PI));        
	        if(a==0 || a==180) {
	        	// alert(lng + ', ' + lat);
	        	alert(long2 + ', ' + lat2);
	        }
	        var point = new esri.geometry.Point(long2,lat2);	       	      	        
	        points.push(point);	        
	      }
	    
	    /*  
	    latOffset = 100;
        lonOffset = 100;
        points = [
          new esri.geometry.Point(lng - lonOffset, lat - lonOffset),
          new esri.geometry.Point(lng - lonOffset, lat + latOffset),
          new esri.geometry.Point(lng + lonOffset, lat + latOffset),
          new esri.geometry.Point(lng + lonOffset, lat - latOffset),    
          new esri.geometry.Point(lng - lonOffset, lat - lonOffset)   
        ];
        */
     
	    var polygon = new esri.geometry.Polygon();
	    polygon.addRing(points);
        polygon.spatialReference = new esri.SpatialReference({ wkid: 3414});
        
        //SimpleFillSymbol takes 3 parameter: a string for the fill style, the SimpleLineSymbol, and the fill color        
        //SimpleLineSymbol takes 3 parameter: a string for the outline style, the outline color, and the outline width
        //color is an array, [r,g,b,a] where a is the transparency (from 0 to 1)
        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
          new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
            new dojo.Color([0,0,0]), 2),
            new dojo.Color([0,0,0,0.25]))

	      var polygonGraphic = new esri.Graphic(polygon, symbol);	      
	      
	      myGraphicsLayer.add(polygonGraphic);
	      	      
	    }
	}
	
	function initializeGMap()
	{
		var centerPoint="29500.075,31262.346";  // "28968.113,33562.989";
		var levelNumber=4;
		
		map  = new GetOneMap('map','SM',{level:levelNumber,center:centerPoint});		
		
		if (GBrowserIsCompatible()) 
		{ 
			geocoder = new GClientGeocoder();
			
			/*
			// Display the map, with some controls and set the initial location 
			map = new GMap2(document.getElementById("map"));
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			map.enableContinuousZoom();
			map.setCenter(new GLatLng(1.299, 103.852),14); //Singapore Orchard 1.304 N (top),  103.832 E (right)

			for(var k=0; k<surroundData.length; k++)
			{
				addMarker(k);
			}
			*/
		}
    // display a warning if the browser was not compatible
    //else 
    //{
    //  alert("Sorry, the Google Maps API is not compatible with this browser");
    //}
    
    setTimeout(function(){initializeGraphicsLayer();}, 500);
      
	}
	
	function initializeGraphicsLayer()
  {
      if (map.map.loaded == true) {   
	    myGraphicsLayer = new esri.layers.GraphicsLayer();
	    map.map.addLayer(myGraphicsLayer); 
	    myGraphicsLayer.onClick = onClickGraphic;
	  } else {
	  	setTimeout(function(){initializeGraphicsLayer();}, 500);
	  }
  }
  
  function onClickGraphic(event)
  {
    var mapPoint = event.mapPoint; 
    var screenPoint = event.screenPoint;
    var graphic = event.graphic;
    var westPanel = Ext.getCmp('west-panel');
    if(!westPanel.collapsed)//if not collapsed
    {
      screenPoint.setX(screenPoint.x-westPanel.width+25);
    }
    showInfoWindow(graphic, screenPoint);       
    return;
  }
  
  function showInfoWindow(pointGraphic, screenPoint)  
  {
    var infoWindow = map.map.infoWindow;
    infoWindow.currentGraphic = pointGraphic;
    var title = pointGraphic.attributes['title'];
    var content = pointGraphic.attributes['content'];
    infoWindow.setTitle(title);
    infoWindow.setContent(content);
    if (content != null) {
	    if (content.length < 15) {
	    	infoWindow.resize(200, 50);
	    } else if (content.length < 500) {
	    	infoWindow.resize(300, 100);
	    } else {
	    	infoWindow.resize(380, 250);
	    }
    }
    infoWindow.show(screenPoint, map.map.getInfoWindowAnchor(screenPoint));
    lastOpenedType = pointGraphic.attributes['type'];
  }

	function zoomInMyLoc() 
	{
		//var myLocPoint = new GLatLng(myLat, myLon);
		//map.zoomIn(myLocPoint, true, true);
	}
	
	function autoZoom() 
	{
		//if (map.getZoom()<16) {
		//	zoomInMyLoc();
		//	setTimeout('autoZoom()', 500);
		//}
	}
	
	function readjustMapCenter() {
		if (!map) return;
		
		if (map.map) {
			var recenterPoint = new esri.geometry.Point(myLon2+200, myLat2, new esri.SpatialReference({ wkid: 3414 }));
			map.map.centerAt(recenterPoint);
		}
		
		//var accordionContainer = Ext.getCmp('west-panel');		
		//if (accordionContainer.collapsed) {
		//	map.panBy(new GSize(-250, 0));
		//} else {
		//	map.panBy(new GSize(-125, 0));
		//}
	}
	
	 function search()
  {
    var search = Ext.get("search");
    var searchText = search.getValue();   
    var basicSearch = new BasicSearch; 
     basicSearch.searchVal = searchText; 
    basicSearch.returnGeom = '1'; 
    basicSearch.GetSearchResults(searchCallback);
  }
  
  function searchCallback(resultData)
  {
    var results = resultData.results;
    if (results == 'No results') 
    {
      alert("No result(s) found");
      return false
    }
    else 
    {
      var htmlStr = "<table>";
      htmlStr = htmlStr + "<tr><th>Search Value </th></tr>";
      for (var i = 0; i < results.length; i++) 
      {
        var row = results[i];
        htmlStr = htmlStr + "<tr>";
        htmlStr = htmlStr + "<td>";
        htmlStr = htmlStr + "<a href='JavaScript:ZoomTo(" + row.X + "," + row.Y + ")'>" + row.SEARCHVAL + "</a>";
        htmlStr = htmlStr + "</td>";
        htmlStr = htmlStr + "</tr>";
      }
      htmlStr = htmlStr + "</table>";
      alert(htmlStr);
    }
  }
  
	function addressGeocoded(point) 
	{
		if (!point) {
        	alert(myAddr + " not found");
      	} else {
			myLat = point.lat();
			myLon = point.lng();
			
			// alert('Result: ' + myLat + ' ' + myLon);
						
			setMyLoc();
		}
	}
	
	function geocodeAddr() 
	{		
		var searchbox = document.getElementById("searchbox");
		
		if (searchbox) {
			myAddr = searchbox.value;
			var geocodedAddr = myAddr;
			if (myAddr && myAddr.length>0) {
				geocodedAddr = myAddr.toLowerCase();
				if (geocodedAddr.indexOf('singapore') == -1) {
					geocodedAddr = geocodedAddr + ', singapore';
				}
				
				// alert('Geocoding ' + geocodedAddr);
				
				geocoder.setBaseCountryCode('sg');
				geocoder.getLatLng(geocodedAddr, addressGeocoded);
			}			
		}
	}
	
	function addressDecoded(response) 
	{
		if (!response || response.Status.code != 200) {
			alert("No valid address found, status code:" + response.Status.code);
		} else {
			place = response.Placemark[0];
			myAddr = place.address;
			try { 
			   myAddr = place.AddressDetails.Country.Thoroughfare.ThoroughfareName;
			} catch (e) {}
			// alert(myAddr);
			setAddressBox(myAddr);	
			
			setMyLoc();
		}
	}
	
	function reverseGeocode(myLat, myLon, callback) {
		geocoder.getLocations(new GLatLng(myLat, myLon), callback);
	}
	
	function initSN(retry) {
		if (map.map==undefined || map.map.loaded == false) {
			if (!retry) {
				retry = 1;
			} else {
				retry++;
			}
			
			if (retry>3) {
				return;
			}
			
			setTimeout(function(){initSN(retry);}, 500);
			return;
		}
		
		isMyLocSet = true;
					
		//var myLocPoint = new GLatLng(myLat, myLon);
		//var myLocPoint = new esri.geometry.Point(28968.113, 33562.989, new esri.SpatialReference({ wkid: 3414 }));
				
		reset();
		reload();
		
		// alert('About to center and zoom OneMap...');
		// The following is equivalent to this, but smoother: map.setCenter(myLocPoint, 16);
		
		var myLocPoint = new esri.geometry.Point(parseFloat(myLon2), parseFloat(myLat2), new esri.SpatialReference({ wkid: 3414 }));
		map.map.centerAndZoom(myLocPoint, 6);
		//map.map.centerAt(myLocPoint);
		
		// Re-center
		//map.panTo(myLocPoint);
		
		// Then zoom in twice from level 14 to 16.
		//setTimeout('autoZoom()', 500);
		
		/*
		var customIcon = new GIcon(baseIcon);
		customIcon.image = '/images/youarehere.png';
		customIcon.iconSize = new GSize(32, 32);
		var markerOptions = { icon:customIcon };
		var myLocMarker = new GMarker(myLocPoint, markerOptions);
		GEvent.addListener(myLocMarker, "click", 
			function() 
			{
				myLocMarker.openInfoWindowHtml('My Location');
			});
		map.addOverlay(myLocMarker);
		*/
		
	  if(myGraphicsLayer==null)
    {
      myGraphicsLayer = new esri.layers.GraphicsLayer();
      map.map.addLayer(myGraphicsLayer); 
      myGraphicsLayer.onClick = onClickGraphic;         
    }
			
   	var point1XY = myLon2 + "," + myLat2; // "28968.1016,33560.975";
   	var pointGraphic=generatePointGraphic(point1XY, 'youarehere.png', '/images/' );   	
  	pointGraphic.attributes = new Object();
    pointGraphic.attributes['title'] = 'You are here';
    pointGraphic.attributes['content'] = '';    
  	pointGraphic.symbol.width=30;
		pointGraphic.symbol.height=30;
		myGraphicsLayer.add(pointGraphic);	
		 	
		//drawRadius(myLat2, myLon2, radius);
		
		// Re-adjust center if west panel is open
		setTimeout('readjustMapCenter()', 1000);			
		
		// Expand and enable the selector window
		selectorWin.setDisabled(false);
		selectorWin.expand();
	}
	
	function openInfoWindow(selectedItemId) {	
    var pointGraphic =  gMarkers[selectedItemId];
    var mapPoint = pointGraphic.geometry;
    map.map.centerAt(mapPoint);
    var screenPoint = map.map.toScreen(mapPoint);     
    showInfoWindow(pointGraphic, screenPoint);        
  }
	
	function checkResizeMap() {
		if (map) {
			
			//resize the div first ourselves
      var mapDiv = Ext.get("map");
      var width = Ext.get('mybody').getWidth();
      var height = Ext.get('mybody').getHeight();
      mapDiv.setWidth(width);
      mapDiv.setHeight(height);
      //then resize the map
      if (map) 
      {
        if (map.map) 
          map.map.resize();
      }
		}
	}
	
	function clearMapOverlay() {
		if (map) {
			if (map.map) {			  
		    map.map.infoWindow.hide();
			}
		}
		if(myGraphicsLayer)
		  myGraphicsLayer.clear();
	}