var mapstraction;
    var marker;

    var zoomlvl = 15;
    var catHK = 0;
    var catSGHT = 1;
    var catSHOP = 2;
    var catFOOD = 3;
    var catACOM = 4;
    var catXPRT = 5;
    var wpking = 22;
    var wpwai  = 114;
    var mapTypROD = 1;
    var mapTypSAT = 2;
    var mapTypHYB = 3;

    var wptArrayLat1 = [];
    var wptArrayLon1 = [];
    var wptArrayLat = [];
    var wptArrayLon = [];
    var wptArrayTxt = [];
    var wptArrayPic = [];
    var wptArrayPcw = [];
    var wptArrayPch = [];
    var wptArrayThm = [];
    var wptArrayURL = [];
    var wptArrayIcn = [];
    var wptArrayCat = [];

    var ttl_markers = 0;
    var POI_num = -1;
    var mapcenter = 0;
    var wptHkBlk = 0;
    var PrvsMarker = -1;
    var mapType = mapTypROD;

    function create_map(markers_cnt) 
    {
   	mapstraction = new mxn.Mapstraction('map12hk', 'googlev3');

	// ---------- set type and center
        pt0 = (wpking + wptArrayLat[mapcenter]/200) * wptHkBlk + wptArrayLat[mapcenter] * (1 - wptHkBlk) ; 
	pt1 = (wpwai  + wptArrayLon[mapcenter]/200) * wptHkBlk + wptArrayLon[mapcenter] * (1 - wptHkBlk) ; 
	if (mapType == mapTypSAT)
	{
		mapstraction.setMapType(mxn.Mapstraction.SATELLITE);
	}
	else if (mapType == mapTypHYB)
	{
		mapstraction.setMapType(mxn.Mapstraction.HYBRID);
	}

	mapstraction.setCenterAndZoom(new mxn.LatLonPoint(pt0, pt1), zoomlvl);

	//mapstraction.addSmallControls();
	mapstraction.addLargeControls();
		
	// markers
	if (ttl_markers > 0)
	{ num_markers = ttl_markers; }
	else
	{ num_markers = markers_cnt; }

	var IcnW = 25;
	var IcnH = 16;
        var Icn2use = '';
        for (i=0; i<=num_markers; i++)
        {
	    pt0 = (wpking + wptArrayLat[i]/200) * wptHkBlk + wptArrayLat[i] * (1 - wptHkBlk) ; 
	    pt1 = (wpwai  + wptArrayLon[i]/200) * wptHkBlk + wptArrayLon[i] * (1 - wptHkBlk) ; 
	    marker = new mxn.Marker(new mxn.LatLonPoint(pt0, pt1));

	    marker.ifo = "<a href='" + wptArrayURL[i] + "'><img class='rpad' src='" + wptArrayPic[i] + "' width='" + wptArrayPcw[i] + "' height='" + wptArrayPch[i] + "' border='0'></a>" + wptArrayTxt[i];
	    marker.setInfoBubble(marker.ifo);
	    marker.click.addHandler(mymarkerclicked); 
	    marker.num = i;
            marker.setAttribute( 'markerCat', wptArrayCat[i] );  
            if ((wptArrayIcn[i] != null) || (POI_num == i))
            {
                if (wptArrayIcn[i] != null) 
		{
                    if (wptArrayCat[i] == catACOM)
                    {
			IcnW = 25;
			IcnH = 16;
                    }
                    else if (wptArrayCat[i] == catFOOD) 
                    {
			IcnW = 25;
			IcnH = 25;
                    }
                    else if (wptArrayCat[i] == catSGHT) 
                    {
			IcnW = 27;
			IcnH = 25;
                    }
                    Icn2use = wptArrayIcn[i] ; 
		}

                if (POI_num == i)
                {       Icn2use = '/icn/mapicn12hk_POI.gif' ;
                        IcnW = 30;
                        IcnH = 30;
                }

                marker.setIcon(Icn2use, [IcnW,IcnH]);
//		marker.setHover(true);
            }

            marker.openInfoBubble.addHandler(myboxopened);
//            marker.closeInfoBubble.addHandler(myboxclosed);

    	    mapstraction.addMarker(marker);
//            plot_thumbnail(i, new mxn.LatLonPoint(wptArrayLat[i] + .00015, wptArrayLon[i] - .0001), wptArrayThm[i], wptArrayPcw[i], marker.ifo);

        }

	mapstraction.addMapTypeControls(); 

//	create_control("reset", function() 
//		{
//                        mapstraction.setCenterAndZoom(new mxn.LatLonPoint(wptArrayLat[0], wptArrayLon[0]), zoomlvl);
// //                       mapstraction.autoCenterAndZoom();
//		}
//	)

//        mapstraction.autoCenterAndZoom();
//	mapstraction.setMapType(Mapstraction.SATELLITE);
//	mapstraction.setMapType(2);

    }

    function get_random_by_bounds(bounds) 
    {
      var lat = bounds.sw.lat + (Math.random() * (bounds.ne.lat - bounds.sw.lat));
      var lon = bounds.sw.lon + (Math.random() * (bounds.ne.lon - bounds.sw.lon));
      return new mxn.LatLonPoint(lat, lon);
    }

    function mymarkerclicked(event_name, event_source, event_args)
    {
	if (PrvsMarker > -1)
	{	
		PrvsMkr2clos = mapstraction.markers[PrvsMarker];
		PrvsMkr2clos.closeBubble();
	}

	PrvsMarker = event_source.num;  // save to global for use later
    }

    function myboxopened(event_name, event_source, event_args)
    {
	mapcenter = mapstraction.getCenter();
	// mapstraction.autoCenterAndZoom();
    }

    function myboxclosed(event_name, event_source, event_args)
    {
	mapstraction.setCenter(mapcenter, {pan: true});
    }

    function create_control(txt, func) 
    {
      var newcontrol = document.createElement("a");
      newcontrol.className = 'googlecontrol';
      newcontrol.appendChild(document.createTextNode(txt));
      
      // Events
      newcontrol.onclick = func;
      
      mapstraction.currentElement.appendChild(newcontrol);
    }

    function plot_thumbnail(mk_num, pt, thumbimg, smallw, mk_ifo) 
    {
    	var mk = new mxn.Marker(pt);
	if (smallw > 0)
	{ thumW = 50; thumH = 52; }
	else
	{ thumW = 0; thumH = 0; }

    	mk.setIcon(thumbimg, [thumW, thumW]);
    	mk.setShadowIcon('outline.png', [thumH, thumH]);
    	mk.setInfoBubble(mk_ifo);
    	mapstraction.addMarker(mk);
    }

    function resetMap(wptNum,ZoomLvl2use) 
    {
//		create_map(ttl_markers);
        	pt0 = (wpking + wptArrayLat[wptNum]/200) * wptHkBlk + wptArrayLat[wptNum] * (1 - wptHkBlk) ; 
		pt1 = (wpwai  + wptArrayLon[wptNum]/200) * wptHkBlk + wptArrayLon[wptNum] * (1 - wptHkBlk) ; 
                mapstraction.setCenterAndZoom(new mxn.LatLonPoint(pt0, pt1), ZoomLvl2use);
    }