//<![CDATA[

var t;
var map = null;
var geocoder = null;
var hMarker //Declare the Active/Hover Marker variables
var highlightIndex = 0;
var scrlPos;

var baseIcon = new GIcon();
baseIcon.shadow = "http://imfimg.com/static/0/img/mapicon/shadow.png";
baseIcon.iconSize = new GSize(24, 32);
baseIcon.shadowSize = new GSize(31, 32);
//baseIcon.iconAnchor = new GPoint(12, 32);
baseIcon.iconAnchor = new GPoint(2, 31);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(10, 22);

// icon for center of radius search
var sicon = new GIcon();
sicon.image  = "http://imfimg.com/static/0/img/mapicon/icon_flag.png";
sicon.shadow = "http://imfimg.com/static/0/img/mapicon/icon_flag_shadow.png";
sicon.iconSize = new GSize(31, 31);
sicon.shadowSize = new GSize(35, 31);
sicon.iconAnchor = new GPoint(0, 31);
sicon.infoWindowAnchor = new GPoint(9, 2);
sicon.infoShadowAnchor = new GPoint(18, 25);

// icon for highlight
var hicon = new GIcon();
hicon.image  = "http://imfimg.com/static/0/img/map/marker_yellow.png";
hicon.iconSize = new GSize(20, 34);
hicon.shadowSize = new GSize(37, 34);
hicon.iconAnchor = new GPoint(9, 34 + 20);

hicon.image  = "http://imfimg.com/static/0/img/mp/markerA_h.png";
hicon.iconSize = new GSize(24, 32);
hicon.iconAnchor = new GPoint(2, 31 + 20);

var gmarkers = [];	// array of the markers

var mapDiv;
var satelliteDiv;
var exeCount = 1;
var MAP_MIN_HEIGHT = 562;
var MAP_MIN_WIDTH = 500;

var iMap = {
	isDEBUG: false,
	markers: [],
	isRefreshMapOn: true,
	isZoomIgnored: false,
	largeMapControl: new GLargeMapControl(),
	smallMapControl: new GSmallMapControl(),
	isPanLoaded: false,
	
	log: function(msg) {
		if(this.isDEBUG) 
			GLog.write(msg);
	},
	
	getMarkerOf: function() {
		var ll,mk;

		var bounds = map.getBounds();

		for(var i = 1; i < gmarkers.length; i++) {
			if(gmarkers[i]) {
				ll = gmarkers[i].getLatLng();
				mk = gmarkers[i];
				if(bounds.containsLatLng(ll))
					break;
			}
		}

		return mk;
	},

	clearMarkers: function() {
		for (var i = 0; i < iMap.markers.length; i++)
			map.removeOverlay(iMap.markers[i]);

		iMap.markers.length = 0;
	},

	showListing: function(text) {
		document.getElementById("scrolling-list").innerHTML = text;
	},

	hideListing: function() {
		document.getElementById("scrolling-list").innerHTML = "";
	},

	showNFMessage: function(title, text) {
		var noMsg = '<div class="list_container" style="background:none;border:0;">' +
					'	<table cellpadding=0 border=0>' +
					'	<tr>' +
					'		<td width="33" align="center"><img src="http://imfimg.com/static/0/img/icon_warning.gif" width="21" height="21" alt="" /></td>' +
					'		<td><span style="font-size:12px; font-weight:bold;">'+title+'</span></td>' +					
					'	</tr>' +
					'	<tr>' +
					'		<td>&nbsp;</td>' +
					'		<td><span style="font-size:10px; font-weight:normal;">'+text+'</span></td>' +
					'	</tr>' +
					'	</table>' +
					'</div>';		
		
		this.showListing(noMsg);
	},

	showResultCount: function(text) {
		var res1 = document.getElementById("resultCount1");
		//var res2 = document.getElementById("resultCount2");
		
		res1.innerHTML = text;
		//res2.innerHTML = text;
	},

	hideResultCount: function() {
		var res1 = document.getElementById("resultCount1");
		//var res2 = document.getElementById("resultCount2");
		
		res1.innerHTML = "";
		//res2.innerHTML = "";
	},
		
	doIMapQuery: function(start) {
		var $ = jQuery;
		var searchType = $("#iMap_ty").html(); //Reverse Look up, Business Search
		if (searchType=='PH') return;  //If Reverse Look up search, don't call this function to move and refresh.
		
		var neLat = map.getBounds().getNorthEast().lat();
		var neLng = map.getBounds().getNorthEast().lng();
		var swLat = map.getBounds().getSouthWest().lat();
		var swLng = map.getBounds().getSouthWest().lng();
		/*
		var latDelta = (neLat - swLat) * 0.01;
		var lngDelta = (neLng - swLng) * 0.01;
		// make proper boundaries
		neLat = neLat - latDelta;
		neLng = neLng - lngDelta*0.4;
		swLat = swLat - latDelta;
		swLng = swLng - lngDelta*2;
		*/
		Webcam.map.addControl(waitControl.prototype);

		this.clearMarkers();
		unhighlightIcon(); // for new map search

		var url;
		var lang;
		var that = this;

		(function($) {
			lang = $("#iMap_lang").html();

			url = '/search_area_i.jsp?' // to handle with moving map event
					+ '&lang=' + lang
					+ '&imp=' + $("#iMap_imp").html()
					+ '&nt=' + $("#iMap_stype").html()
					+ '&str=' + start 
					+ '&ar=' + swLat + ',' + swLng + ',' + neLat + ',' + neLng 
					+ '&hid=' + $("#iMap_sic").html()
					+ '&na=' + $("#iMap_sname").html()
					+ '&locName=' + $("#iMap_loc").html()
					+ '&vm=' + $("#iMap_vm").html();
		})(jQuery);

		$.ajax({
			   type: "GET",
			   url: '/search_area_i.jsp',
			   data: url+'&t='+(new Date()).getTime(),
			   dataType: "html",
			   success: function(html) {
					$("#listings-results").html(html);

					var total = $("#globalVars").data("totalcount");
					$(".results-overview h1 span").text(total?total:"0");
					
					if(!mjStreetView.isStreetView)
						Webcam.getWebcamMarkers();

					$(".overlayImage").setVideoOverlay();
					setSize();
					
					$(".listing.vertical").each(function(){
						var lat = $(this).data("lat"), 
							lng = $(this).data("lng"),
							index = $(this).data("boxIndex");
						
						var point = new GLatLng(lat,lng);						
						var html = getInfoHtml(index);
						//var label = mks[i].getAttribute("label");
						//var viewPoint = mks[i].getAttribute("viewpoint");					
						
						// create the marker						
						var marker = createMarker(point,index,html,"");
						map.addOverlay(marker);
					});
					
					IMF.listpage.getAllMoreDetails();
			   },
			   error: function(xhr, textStatus, errorThrown) {
				  //alert("Error : " + xhr + ":" + textStatus + ":" + errorThrown);
			   }
		  });
	},

	getWeather: function(lat, lng, lang, zoom) {
		var url = '/weather/search.jsp?&lang=' + lang	+ '&lat=' + lat	+ '&lng=' + lng + '&zoom=' + zoom;
		//alert(url);

		var request = GXmlHttp.create();

		request.open("GET", url, true);

		request.onreadystatechange = function() {
			if (request.readyState == 4) {
				var xmlDoc = request.responseXML;
	
				// parse header
				var hdr = xmlDoc.documentElement.getElementsByTagName("header");
				var resText = hdr[0].getAttribute("resText");
				var cityName = hdr[0].getAttribute("cityName");
				//var prov = hdr[0].getAttribute("prov");
	
				(function($){
					$("#bs_weather").html(resText);
					$("#iMap_cityNav").html(cityName);
					$("#iMap_provNav").html("");  //The state name is redundantly displayed.
										
					if ($.trim(cityName)=="," || $.trim(cityName)=="") {
						$("#iMap_word_connector").html("");
						$("#iMap_cityNav").html("");						
					}
					else {
						if($.trim($("#iMap_word_connector").text())==""){
							$("#iMap_word_connector").html(" in ");
						}
					}
				})(jQuery);

			}
		}

		request.send(null);
	},
	
	getNews: function(lat, lng, lang, zoom) {
		var url = '/getNews.jsp?&lang=' + lang	+ '&lat=' + lat	+ '&lng=' + lng + '&zoom=' + zoom;
	
		var request = GXmlHttp.create();
	
		request.open("GET", url, true);
	
		request.onreadystatechange = function() {
			if (request.readyState == 4) {
				var xmlDoc = request.responseXML;
	
				// parse header
				var hdr = xmlDoc.documentElement.getElementsByTagName("header");
				var resText = hdr[0].getAttribute("resText");
	
				(function($){
					$("#bs_news").html(resText);
				})(jQuery);
			}
		}

		request.send(null);
	},
	
	deSelectedVM: function(vmUrl) {
			var vmVal = "";
			
			(function($){
				if(vmUrl.indexOf("vm=") >= 0)
					vmVal = vmUrl.substring(vmUrl.indexOf("vm=")+3);

				$("#iMap_vm").html(vmVal);
			})(jQuery);
			
			this.doIMapQuery(1);
	}
};

function GoCenterMap(options) {
	centerMap(options.centerLL.lat, options.centerLL.lng, options.initZoom);
	var bounds = new GLatLngBounds();
	bounds.extend(new GLatLng(options.maxLL.lat,options.maxLL.lng));
	bounds.extend(new GLatLng(options.minLL.lat,options.minLL.lng));
	map.setZoom(map.getBoundsZoomLevel(bounds));
	map.closeInfoWindow();
}

function loadMap(spanishFlag, impId) { // called from MapListingData.java	
//function loadMap(options) {
		var $ = jQuery,
			searchType = $("#iMap_ty").html(), //Reverse Look up, Business Search
			impId = IMF.vars.userImpId,
			spanishFlag = IMF.vars.lang == "1"?"T":"F",
			opts = {mapId:"map",
					mapMinHeight:MAP_MIN_HEIGHT, 
					mapMinWidth:MAP_MIN_WIDTH, 
					resizeCallback:resizeMap,
					largeMapControl:iMap.largeMapControl,
					//centerPoint: [options.centerLL.lat,options.centerLL.lng],
					centerPoint: [c_lat,c_lng],
					webcamControlId:"webcamContainer",
					spanishFlag:spanishFlag,
					impId:impId};

		map = i$.initializeMap(opts);		

		if(impId == '10') {
		    GEvent.addListener(map, 'maptypechanged', updateDotOverlay);
		    GEvent.addListener(map, 'click', mjUserClick);
		    GEvent.addListener(map, 'mousemove', function(latlng){	mjMapMouseMove(latlng);	});
		}

		GEvent.addListener(map, "dragend", function() { 
			if(iMap.isRefreshMapOn)
				iMap.doIMapQuery(1);				
			else {
				if(!i$.getStreetViewInstance())
					Webcam.getWebcamMarkers();
			}
			if(impId == '10') {
				mjStreetView.isThere = false;
				updateDotOverlay();
			}
		});
		
		GEvent.addListener(map, "infowindowclose", function() {
			jQuery("#save-share-popup, #more-details-popup").removeShadow().remove();
		});

    // because of resizing after loading map the map is zoomed in by resizeMap function
    // sometimes zoom-in is occurred two times or three times. That is why I'm using two events, moveend, zoomend
		var isLoadingFinished = false;
		GEvent.addListener(map, "moveend", function() {
	    	if(!isLoadingFinished && (exeCount == 2 || exeCount == 3 || exeCount == 4)) {
	    		Webcam.get(map, spanishFlag);
			   	//map.addControl(webcamSelectTypeControl.prototype);
				isLoadingFinished = true;
				
				if(impId == '10' && isLoadingFinished && !mjStreetView.isExecutedOnLoad) {
					mjStreetView.isThere = false;
					updateDotOverlay();
					mjStreetView.isExecutedOnLoad = true;
				}				

				exeCount++;
	    	}
	    	else
	   			exeCount++;
		});

		GEvent.addListener(map, "zoomend", function() {
			if(isLoadingFinished) {   //User actions
				if(iMap.isRefreshMapOn && !iMap.isZoomIgnored)
					iMap.doIMapQuery(1);
				else {
					//if (!i$.getStreetViewInstance())
					Webcam.getWebcamMarkers();
				}

				if(impId == '10' && mjStreetView.isStreetView)
					mjZoomEndHandler();  // mjZoomEndHandler deals with updateDotOverlay				
			}
			else  //Automatic actions
				exeCount++;
		});

		
		if (searchType!='PH')
			map.addControl(moveRefreshControl.prototype);
		
		map.addControl(mapControl.prototype);
		map.addControl(recenterControl.prototype);

		resizeMap();
		window.onresize = resizeMap;
		
		if(impId == '10')
			initAvatarIcons();
		/*
		// get all pins
		for(var i = 0; i < options.pins.length; i++) {
			addLoc(new GLatLng(options.pins[i].lat,options.pins[i].lng), options.pins[i].seq);
		}
			
		GoCenterMap(options);
		*/
		
		//if (WebcamObj.nhIDs.length==0) $("#webcamContainer").hide();
	//}
}

function centerMap(lat, lng, zoom) {
  map.setCenter(new GLatLng(lat, lng), zoom);
}

function createMarker(point, index, html, viewPoint){
	var letter = String.fromCharCode("a".charCodeAt(0) + (index -1));
	var icon = new GIcon(baseIcon);
	icon.image = "http://imfimg.com/static/0/img/mapicon/" + letter + "_off.png";
	var marker = new GMarker(point, icon);
	gmarkers[index] = marker;

	iMap.markers[iMap.markers.length++] = marker;
  
	if(viewPoint != "")
		marker._can_viewPoint = viewPoint;  
  
	var aicon = new GIcon(baseIcon);
	aicon.image = "http://imfimg.com/static/0/img/mapicon/" + letter + "_on.png";
	
	/*
	GEvent.addListener(marker, 'click', function(){
		if(mjStreetView.options.impId != '10' && i$.isStreetView() || 
		   mjStreetView.options.impId == '10' && mjStreetView.isStreetView)
			  i$.getStreetView(marker.getLatLng());
		  else
			  marker.openInfoWindowHtml(html);
	});
	*/

	GEvent.addListener(marker, 'mouseover', function() {
		try { map.removeOverlay(hMarker); } catch (e) {}
		hMarker = new GMarker(marker.getPoint(), aicon);

		GEvent.addListener(hMarker, 'mouseout', function(){
			try { hMarker.hide(); } catch (e) {}
			unhighlightBox(index);
			clearTimeout(t);
			//try { map.removeOverlay(hMarker); } catch (e) {}
		});

		GEvent.addListener(hMarker, 'click', function() {
			if(mjStreetView.options.impId != '10' && i$.isStreetView())
				i$.getStreetView(hMarker.getLatLng());
			else if(mjStreetView.options.impId == '10' && mjStreetView.isStreetView)
				mjUserClick(hMarker);
			else				
				hMarker.openInfoWindowHtml(IMF.getInfoHtml(index));
			  	//hMarker.openInfoWindowHtml('<b>'+hMarker.getLatLng().lat()+','+hMarker.getLatLng().lng()+'</b>');
		});
		
		showListingBox(index);
		highlightBox(index);
		map.addOverlay(hMarker);
		// if view point field is enabled from database it can be used to adjust view point as users click it
		if(viewPoint != "") {
			hMarker._can_viewPoint = viewPoint;
		}
	});

	return marker;
}

function getInfoHtml(index) {
	var info = jQuery("#colorbox"+index).clone()
				.find("div.list_marker").remove().end()
				.find(".listing-container.left").addClass("listing")
				.css({width:"260px"})
				.end()
				.html();
	return info;
}

function addLoc(point, index) {
	  //var info = document.getElementById("bubblebox" + index).innerHTML;
	  var info = "";//getInfoHtml(index);
	  map.addOverlay(createMarker(point, index, info));
}

function addCenterLoc(point) {
  map.addOverlay(new GMarker(point, sicon));
}

function addPoiLoc(point) {
  var label = document.getElementById("POI").innerHTML;

  var marker = new GMarker(point, sicon);
  GEvent.addListener(marker, 'click', function(){
   marker.openInfoWindowHtml(label);
  });

  map.addOverlay(marker);
}

function panTo(lat, lng) {
  window.setTimeout(function() {
	  map.panTo(new GLatLng(lat, lng));
  }, 500);
}

function zoomTo(index) {
	iMap.isZoomIgnored = true;
	
	var marker = gmarkers[index];
	var curLevel = map.getZoom();
	if (curLevel < 15) {
		map.setCenter(marker.getPoint(), 15);
	}

	window.setTimeout(
		function() { map.panTo(marker.getPoint()); }, 
		500
	);

	GEvent.trigger(gmarkers[index],'click'); 
	unhighlightIcon();

	iMap.isZoomIgnored = false;
}

	var gSize  = [0,0,0,0,0];
	var gStart = [0,0,0,0,0];
	var letterarray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
	var maxpagesize = 6;

	function setMultiTab(mlc,idx){
		var letter = letterarray[idx-1];

		var base = document.getElementById('navigation_sm' + mlc);
		var arr = base.getElementsByTagName('div')

		var hd = document.getElementById('ml_header' + mlc);
		hd.innerHTML = letter;
		
		// show box-area
		for (var i=1;i<=20;i++){
			var mbox = document.getElementById('multiBox'+mlc+"-"+(i));
			if (mbox != null) {
				if ((i+gStart[mlc])==idx){
					mbox.style.display="block"
				}else{
					mbox.style.display="none"
				}
			}
		}		

		// check if the letter is in the tabs
		var found = 0;
		for (var i=0;i<arr.length;i++){
			if (arr[i].getElementsByTagName('a')[0].innerHTML==letter){
				found=1;
			}
		}		

		// make sure the page shows the letter
		if (found == 0) {
			var st = 0;
			if ((idx-gStart[mlc]) <=6)
				st = 0;
			else if ((idx-gStart[mlc]) <=12)
				st = 6;
			else if ((idx-gStart[mlc]) <=18)
				st = 12;
			else if ((idx-gStart[mlc]) <=20)
				st = 18;
				
			genPage(mlc,st,gSize[mlc],gStart[mlc]);
		}

		// show tab-area
		for (var i=0;i<arr.length;i++){
			if (arr[i].getElementsByTagName('a')[0].innerHTML==letter){
				arr[i].setAttribute('id', 'current');
			}else{
				arr[i].setAttribute('id', 'tab'+i);
			}
		}		
	}
	
	function buildTab(mlc, size, start) {
		genPage(mlc, 0,size,start);
		gSize[mlc] = size;
		gStart[mlc] = start;
		setMultiTab(mlc,start+1);
	}

	function genPage(mlc, st, length, start){

		var strarr = [];
		var str = ''
		var pagesizeup = Math.min(maxpagesize, length-st)
		var pagesizedn = Math.max(0, st-maxpagesize)
		var pagedn = pagesizedn
		var pageup = st+pagesizeup
		if (st>0){
			strarr.push(' <a href="javascript:genPage('+mlc+','+pagedn+', '+length+', '+start+');"><img align="right" id="prev" src="/images/arrow_left.gif" border="0" /></a> ')
		}else{
			strarr.push(' <img id="prev" src="/images/spacer.gif" width="20" height="21" border="0" align="right"  /> ')
		}
		
		for (var i=st;i<pageup;i++ ){
			var letter = letterarray[i+start];
			var idx = (i+start+1);
			strarr.push( '<div onmouseout="Javascript:unhighlightBox('+idx+');" onmouseover="javascript:setMultiTab(' +mlc+ ','+ idx + ');highlightBox('+idx+');highlightIcon('+idx+');" id="" ><a href="javascript:void(0);">'+letter+'</a></div>');
		}
		if (pageup < length){
			//str += '<div onclick="javascript:generatePage('+pageup+','+length+');" id="next" ><a href="javascript:void(0);">&gt;</a></div>'	
			strarr.push(' <a href="javascript:genPage('+mlc+','+pageup+', '+length+', '+start+');"><img align="right" id="next" src="/images/arrow_right.gif" border="0" /></a> ');
		}else{
			strarr.push( '<img id="next" src="/images/spacer.gif" width="20" height="21" border="0" align="right"  /></a> ');
		}
		strarr.reverse()
		for (var i=0;i<strarr.length;i++ ){
			str += strarr[i]
		}
		var base = document.getElementById('navigation_sm' + mlc);
		base.innerHTML = str;
		
//		setMultiTab(mlc,st+1);
	}

	
function showBox(index){
		var letterarray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
		var bx = document.getElementById("colorbox"+index);		
		var pNode = bx.parentNode;
		
		var parentName = pNode.id;	
		if (parentName.substring(0,8) == "multiBox") {
			var mlc = parentName.substring(8,9);
			var idx2 = parentName.substring(10);
			var letter = letterarray[index-1];
			
			setMultiTab(mlc,index);
		}
}
	
function showListingBox(index) {
	showBox(index);

   var ct = document.getElementById("scrolling-list"); //document.getElementById("listings_results");
   var top = document.getElementById("colorbox1");
   var bx = document.getElementById("colorbox"+index);

	var pNode = bx.parentNode;
	var parentName = pNode.id;	

	if (parentName.substring(0,8) == "multiBox") {
		var idx = parentName.substring(8,9);
		bx = document.getElementById("multiBoxContainer"+idx);
	}
	
	var start = bx.offsetTop - top.offsetTop;
	var end = start + bx.offsetHeight+ 30;
	var c_start = ct.scrollTop;
	var c_end = c_start + ct.offsetHeight+5;

	if (start < c_start) {
		scrlPos = start;
		clearTimeout(t);
		t = setTimeout('scrlTo()', 1000);
	}
	else {
		var diff = end - c_end;
		scrlPos = c_start + diff;
		
		scrlPos = start;

		if ((start + ct.offsetHeight) > (ct.scrollHeight))
			scrlPos = ct.scrollHeight - ct.offsetHeight + 15;
		
		clearTimeout(t);
		t = setTimeout('scrlTo()', 1000);
	}
}

function scrlTo() {
	var ct = document.getElementById("scrolling-list");

	if (!(ct.scrollTop == scrlPos)) {
		var diff = Math.round((scrlPos - ct.scrollTop) / 5);
		if (diff > 50) 
			diff = 50;
		else if(diff < -50) 
			diff = -50;

		if (diff <= 3 && diff >= -3) {
			ct.scrollTop = scrlPos;
			clearTimeout(t);
		}
		else {
			var prev = ct.scrollTop;
			ct.scrollTop += diff;
			
			t=setTimeout('scrlTo()', 10);
		}
	}
	else {
		clearTimeout(t);
	}
		
}

function highlightBox(index) {
	if (highlightIndex > 0 && highlightIndex != index)	
		unhighlightBox(highlightIndex);

	jQuery("#colorbox"+index).css({"background-color": "#FFFFBB"});
	
	highlightIndex = index;
}

function unhighlightBox(index) {
	var index = _index||highlightIndex;
	try {	
		jQuery("#colorbox"+index).css({"background-color": "#FFFFFF"});

		map.DeleteShape(hShape);
		highlightIndex = 0;
		hShape = null;
	} catch (e) {}
}

function highlightIcon(index) {
   if (highlightIndex > 0 && highlightIndex != index) {
		GEvent.trigger(gmarkers[highlightIndex],'mouseout'); 
	}
   try { map.removeOverlay(hMarker); } catch (e) {}

	var marker = gmarkers[index];
	try {
		hMarker = createHighlightMarker(marker.getPoint(), index);
	 	map.addOverlay(hMarker);
	} catch(e) {}

//	var marker = gmarkers[index];
//	GEvent.trigger(gmarkers[index],'mouseover'); 
	highlightIndex = index;
}

function unhighlightIcon() {
	try { map.removeOverlay(hMarker); } catch (e) {}
/*	
   if (lastIndex > 0) {
		GEvent.trigger(gmarkers[lastIndex],'mouseout'); 
	}
*/	
	highlightIndex = 0;
	
}

function createHighlightMarker(point, index) {
	// ------ turn the latlng to pixels position
   var hPoint =
		map.getCurrentMapType().getProjection().fromLatLngToPixel(point ,	map.getZoom());

	// -------- create a GLatLng with a 20 pixels offset south
	var southLatLng =
		map.getCurrentMapType().getProjection().fromPixelToLatLng(new GPoint(
		hPoint.x , hPoint.y + 20 ) , map.getZoom());

  // Create a lettered icon for this point using our icon class
//  var letter = String.fromCharCode("A".charCodeAt(0) + (index -1));
//  hicon.image = "/images/mp/marker" + letter + "_h.png";

  var letter = String.fromCharCode("a".charCodeAt(0) + (index -1));
  hicon.image = "http://imfimg.com/static/0/img/mapicon/" + letter + "_on.png";

	// ------- create the highlighted marker using the highlighted icon
	var highlightMarker = new GMarker(southLatLng, hicon);

  return highlightMarker;
} 

function setSize() {
	var $ = jQuery;

	var mapId = "#map";
	var streetId = "#"+mjStreetView.options.streetId;
	var minStreetSceneHeight = 200;
	var minHeight = 620;
	var minWidth = 600;
	var mapLeftOffset = 482; // this offset is fixed otherwise it is very hard to adjust the left offset of the map div.
	var clHeight = $(window).height();

	// 40 means height of footer
	var newHeight = Math.max(minHeight, clHeight - $("#page-header").height() - 40);
	// make it half, so that it expands along map div as window is resized
	var streetSceneHeight = parseInt(Math.max(minStreetSceneHeight, newHeight / 2));

	// check if there is box ad
	if($("#_boxad_").length != 0)
		newWidth = Math.max(minWidth, $(window).width() - mapLeftOffset - 125); // 125 is the size of box ad
	else
		newWidth = Math.max(minWidth, $(window).width() - mapLeftOffset - 3);

	if(mjStreetView.isStreetView) {
		$(streetId).width(newWidth).height(streetSceneHeight);
		$(mapId).width(newWidth).height(newHeight - streetSceneHeight - 3); // -3 is adjustment for listing height;
		if(map !== undefined)
			map.checkResize(newWidth, newHeight - streetSceneHeight - 3);		
	} else {
		$(mapId).width(newWidth).height(newHeight);
		if(map !== undefined)
			map.checkResize(newWidth, newHeight);
	}
	
	$(".resizable-height").height(newHeight);
	
	// in order to make div.result-count fixed at the top of the div.listings-results
	// the div.result-count is outside of the div.scrolling-list 
	// so it should deduct the height of result-count, which is 40px for each: top and bottom
	$("#scrolling-list").height(newHeight-71);
	
	// diable overflow for the map div otherwise it shows scroll bars, which looks ugly
	$("#map-expand, #_boxad_").css({overflow:"hidden"});
}


function resizeMap() {
	setSize();

	if(map) {
		map.checkResize();
		if(i$.getStreetViewInstance())
			i$.getStreetViewInstance().checkResize();
	}
}

//]]>