function onload_google() 
{
	initialize();
}

var geocoder = null;
var map;
var copyrightTimer = null;
var googleMapComponent;
var x;
var y;
var z;
var pic;
var shopName;
var shopAddr;
var shopid;
var marker;
var windowTip = null;
var timeOutId;
  
// Call this function when the page has been loaded
function initialize() 
{	
	x = document.getElementById("googlemapX").value;
	y = document.getElementById("googlemapY").value;
	z = parseInt(document.getElementById("shop_zoom").value);
	pic = document.getElementById("pic").value;
	shopName = document.getElementById("shopName").value;
	shopAddr = document.getElementById("shopAddr").value;
	shopid = document.getElementById("shop_id_db").value;
		
	var maptype = document.getElementById("mapType").value;
		
	if (maptype == 1)
		googleMapComponent = "GoogleMapComponent2";
	else
	{
		maptype = 0;
		googleMapComponent = "GoogleMapComponent";
	}
		
	setMapComponent(googleMapComponent,"block");
	map = new GMap2(document.getElementById(googleMapComponent));
		
	//copyrightTimer = window.setInterval('makeCopyrightSmaller()', 150);
		
	// different map properties for large and small map
	// small
	if (maptype != 1)
	{
		map.disableDragging();
		GEvent.addListener(map, "click", function() {
			window.location.href = "/shop/default.asp?type=view&shopid="+shopid+"&mapType=1";
		});							
	}
	// large
	else
	{
		map.addControl(new GLargeMapControl());
		z = 18;
	}
		
	map.setCenter(new GLatLng(x,y), z);
	
	// marker on the map for current shop
	function createMarker(point, img_link) 
	{	
		var iconP = new GIcon();
	    iconP.shadow = "";
		iconP.image = img_link;
			
		if (img_link == "/Images/GoogleMap_icon.png")
		{
			iconP.iconSize = new GSize(45, 45);
			iconP.iconAnchor = new GPoint(22.5, 45);
		}
		else
		{
			iconP.iconSize = new GSize(35, 35);
			iconP.iconAnchor = new GPoint(17.5, 35);
		}
		markerOptions = { icon:iconP };
			
		marker = new GMarker(point, markerOptions);
		return marker;
	}
		
	var point = new GLatLng(x,y);
	map.addOverlay(createMarker(point,"/Images/GoogleMap_icon.png"));
		
	var bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
			
	if (maptype == 1)
	{
		// overview map inside big map
		var Tsize = new GSize(200, 170);
		map.addControl(new GOverviewMapControl(Tsize));
		
		// map type control
		map.addControl(new GMapTypeControl());
		
		// for the tip window of current shop for big map
		var message = "<table border='0' cellspacing='5'><tr><td align='left' width='210'>";
		if (pic != "")
			message += "<img src='" + pic + "' width='197' height='146'><br>";
		message += "<b>\U : </b><a href='/shop/default.asp?type=view&shopid=" + shopid + "'>"+ shopName +"</a><br>"
				 + "<b>a} : </b>" + shopAddr + "<br></td></tr>"
				 + "</table>";
			
		GEvent.addListener(marker, "mouseover", function() {				
			showMouseOver(message,point);
		});
			
		GEvent.addListener(marker, "mouseout", function() {
			hideMouseOver("delay");
		});
			
		// show other NearBy-Shops
		//showNearbyMarkers(southWest,northEast,shopid);
	}
	else
	{
		// Add Magnifier marker
		var tlcLatLng = map.fromContainerPixelToLatLng(new GPoint(210,40), true);
		var markPos = new GLatLng(tlcLatLng.y, tlcLatLng.x);
		map.addOverlay(createMarker(markPos,"/Images/AddGoogleMap_magifer.png"));
	}
			
	Event.observe(window, 'unload', uninitMap);		
}
	
function uninitMap()
{
	if(map)
	{
		map.clearOverlays.call(map);
		GUnload();
	}
	marker = null;
	map = null;
}

function setMapComponent(googleMapComponent,type)
{
	document.getElementById(googleMapComponent).style.display = type;
}
	
// copy right font size
function makeCopyrightSmaller() 
{
	if (map.isLoaded())
	{
		for(var i = 0; i < map.getContainer().childNodes.length; ++i) 
		{
			if(map.getContainer().childNodes[i].innerHTML.indexOf(String.fromCharCode(169)) !== -1)
			{
      			map.getContainer().childNodes[i].style.fontSize = '7px';
      			window.clearInterval(copyrightTimer);
      			break;
    		}
    	}
  	}
}

function showMarkers(req)
{
	var shopsDetail = req.responseText.split("\n");
		
	for (var i=0; i<parseInt(shopsDetail.length); i++)
	{
		shopDetail = shopsDetail[i].split("*");
		updateMarker(shopDetail[0],shopDetail[1],shopDetail[2],shopDetail[3],shopDetail[4],shopDetail[5]);
	}
}
	
function updateMarker(id,name,ilat,ilong,addr,pic)
{
	function createMarker(point) 
	{
		iconP = new GIcon();
	    iconP.image = "/Images/GoogleMap_icon_s.png";
		iconP.shadow = "";
		iconP.iconSize = new GSize(15, 15);
		iconP.iconAnchor = new GPoint(7.5, 15);
		iconP.infoWindowAnchor = new GPoint(1, 1);
			
		markerOptions = { icon:iconP };
				
		var marker = new GMarker(point, markerOptions);
			
		var message = "<table border='0' cellspacing='5'><tr><td align='left' width='197'>";
					
		if (pic)
			message = message + "<img src='/okpics/" + pic + "' width='197' height='146'><br>";
		message = message +"<b>\U : </b><a target='_blank' href='/shop/default.asp?type=view&shopid="+id+"'>"+name+"</a><br>"
		  				  + "<b>a} : </b>"+addr+"<br></td></tr>"
						  +"</table>";
					
		GEvent.addListener(marker, "mouseover", function() {		
			showMouseOver(message,point);
		});

		GEvent.addListener(marker, "mouseout", function() {
			hideMouseOver("delay");
		});
			
		GEvent.addListener(marker, "click", function() {
			window.open("/shop/default.asp?type=view&shopid="+id);
		});
			
		return marker;
	}
	
	if (ilat > 0 && ilong >0)
	{
		var point = new GLatLng(ilat,ilong);
		marker = createMarker(point);
		map.addOverlay(marker);
	}
}
	
//function showNearbyMarkers(southWest,northEast,shopid)
//{
//	page = "google-map-get-near-shops.php";
//	var postbody="&lng1="+ northEast.lng() + "&lng2=" + southWest.lng() + "&lat1=" + northEast.lat() + "&lat2=" + southWest.lat() + "&shopid=" + shopid;
//	new Ajax.Request(page, 
//	{ 
//		method: 'post', 
//		postBody:  postbody,
//		onComplete: showMarkers
//	});
//}
	
function showMouseOver(tipHTML,point)
{
	hideMouseOver("fast");
		
	if (windowTip == null || windowTip == '')
	{
		windowTip = document.createElement('div');
		windowTip.id = "windowTip";
	}
		
	windowTip.style.display  = "block";
	windowTip.style.position = "absolute";
	windowTip.onmouseover =	function(e) {
		window.clearTimeout(timeOutId);
	};
	windowTip.onmouseout = function(e) {
		hideMouseOver("delay");
	};
	windowTip.style.padding = "0";
	windowTip.style.margin  = "0";
	windowTip.style.zIndex  = 50000;
	windowTip.innerHTML     = "<div style='background:#FFF;border: 1px solid #555' >" + tipHTML + "</div>";
	document.body.appendChild(windowTip);
	var tlcLatLng = map.fromContainerPixelToLatLng(new GPoint(0,0), true);
	var tlcDivPixel = map.fromLatLngToDivPixel(tlcLatLng);
	var divPos = map.fromLatLngToDivPixel(point);
	var c = new GPoint(divPos.x-tlcDivPixel.x, divPos.y-tlcDivPixel.y);
	var mapPos = findPosition(map.getContainer());
	var tipLeft = c.x + mapPos[0];
	var tipTop = c.y + mapPos[1];
	windowTip.style.left = tipLeft + "px";
	windowTip.style.top  = tipTop + "px";
}
	
function hideMouseOver(type)
{
	if (windowTip != null)
	{
		if (type == 'fast')
		{
			document.getElementById("windowTip").style.display = "none";
			window.clearTimeout(timeOutId);	
		}
		else			
		{
			timeOutId = window.setTimeout("document.getElementById(\"windowTip\").style.display = \"none\"",500);				
		}
	}
}	
	
// Find element x,y location
function findPosition(oLink) 
{
	var posX = null;
	var posY = null;
	if (oLink.offsetParent) 
	{
		for(posX = 0, posY = 0; oLink.offsetParent; oLink = oLink.offsetParent) 
		{
			posX += oLink.offsetLeft;
			posY += oLink.offsetTop;
		}
		return [posX, posY];
	} 
	else 
	{
		posX = oLink.x;
		posY = oLink.y;
		return [posX, posY];
	}
}