var map; var centerLatitude = 13.7464; var centerLongitude = 100.5308; var startZoom = 14; var deselectCurrent = function() { }; copyrights = new GCopyrightCollection('Copyright:'); var MoffleBkkGraphic = new GCopyright('Moffle Maps', new GLatLngBounds(new GLatLng(-90, -180), new GLatLng(90, 180)), 0, '<a href="http://www.chiangdao.com">www.chiangdao.com</a>'); copyrights.addCopyright(MoffleBkkGraphic); var MoffleBkkTiles = new GTileLayer(copyrights, 11, 16); MoffleBkkTiles.getTileUrl = function(tile, zoom) { if (zoom > 16) return 'http://www.moffle.com/img/no_data.gif'; else return 'http://www.chiangdao.com/bangkokmap/images/' + tile.x + '_' + tile.y + '_' + zoom + '.png'; }; MoffleBkkTiles.isPng = function() { return true; }
MoffleBkkTiles.getOpacity = function() { return 1.0; }
var MoffleBkk = new GMapType([MoffleBkkTiles], G_SATELLITE_MAP.getProjection(), 'Map', { shortName: 'ME', tileSize: 256, maxResolution: 16, minResolution: 11 }); function windowHeight() {
    if (self.innerHeight)
        return self.innerHeight; if (document.documentElement && document.documentElement.clientHeight)
        return document.documentElement.clientHeight; if (document.body)
        return document.body.clientHeight; return 0;
}



function handleResize() {

	var height = windowHeight() - document.getElementById('toolbar').offsetHeight - 13;

	document.getElementById('map').style.height = height + 'px';

	document.getElementById('sidebar').style.height = height + 'px';

	height -= 31;

	document.getElementById('sidebar-list').style.height = height + 'px';

}



function changeBodyClass(from, to) {

     document.body.className = document.body.className.replace(from, to);

     return false;

}



function init() {

  if (GBrowserIsCompatible()) {

	handleResize();

	map = new GMap2(document.getElementById("map"));

	map.addMapType(G_NORMAL_MAP);
	map.addMapType(G_HYBRID_MAP);

	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom); 

	map.addControl(new GSmallMapControl());

	map.addControl(new GMapTypeControl());

	map.addControl(new GScaleControl());



//	for(id in markers) {

//		initializePoint(markers[id]);

//	}

	/* [listing 6-18] */

	changeBodyClass('loading', 'standby');

	/* [listing 6-18 end] */

	

	getMarkers();

  }

  if (qword){

	document.getElementById('q_d').value = qword;

  	getList('Search-Results');

  }

  else {

	switch (venue) {

		case 'bangkokattractions':

			getList('Attractions');

			break;

		case 'bangkoktransports':

			getList('Transports');

			break;

		case 'bangkokrestaurants':

			getList('Restaurants');

			break;

		case 'bangkokshopping':

			getList('Shopping');

			break;

		default:			

  			getList('Hotels'); 	

			break;

	}

  }

}



//window.onresize = handleResize;

window.onload = init;



function getMarkers() {

	batch=[];

	var urlstr="/bangkokmap/cityguide.xml";

	var request = GXmlHttp.create();

	request.open('GET', urlstr , true);	// request XML from PHP with AJAX call

	request.onreadystatechange = function () {

		if (request.readyState == 4) {

		var xmlDoc = request.responseXML;

		var markers = xmlDoc.documentElement.getElementsByTagName("marker");

		htmlInfo = new Array( markers.length );				

		for (var i = 0; i < markers.length; i++) {

			var lat = parseFloat(markers[i].getAttribute("lat"));

			var lng = parseFloat(markers[i].getAttribute("lng"));

			var name = markers[i].getAttribute("name");

			var category = markers[i].getAttribute("category");			

			var address = markers[i].getAttribute("address");

			var phone = markers[i].getAttribute("phone");

			var url = markers[i].getAttribute("url");

			var iconimage = markers[i].getAttribute("icon");

			var info = markers[i].getAttribute("info");

			var image = markers[i].getAttribute("image");

			var reviews = markers[i].getAttribute("reviews");


			htmlInfo[i] = "<div align='center' style='font: 13px Helvetica, sans-serif;'>";

			if (markers[i].getAttribute("info") != "NULL"){

			    htmlInfo[i] += "<a href='http://" + info + "' target='_blank'>";
			}

			htmlInfo[i] += "<b>" + name + "</b>";

			if (markers[i].getAttribute("info") != "NULL"){

			htmlInfo[i] += "</a>";
			}

			htmlInfo[i] += "</div>";

			if (markers[i].getAttribute("address") != "NULL"){

			htmlInfo[i] +="<div align='center' style='font: 13px Helvetica, sans-serif;'>"  + address + "</div>" ;

			}


			if (markers[i].getAttribute("reviews") != ""){

			htmlInfo[i] += "<div align='center' style='font: 13px Helvetica, sans-serif;'><a href='http://" + reviews + "' target='_blank'>" + name + " reviews</a></div>";

			}

			

			if (markers[i].getAttribute("image") != "NULL"){

			    htmlInfo[i] += "<div align='center'><a href='http://" + info + "' target='_blank'><img src='http://" + image + "' width='200' height='150' vspace='3' border='0' ></a></div>";	

			}

			//htmlInfo[i] = "</div>";

			if (markers[i].getAttribute("info") != "NULL"){

			    htmlInfo[i] += "<div align='center' style='font: 13px Helvetica, sans-serif;'><a href='http://" + info + "' target='_blank'>more about " + name + "</a></div>";	

			}



	var latlng = new GLatLng(lat,lng);

	createMarker(latlng,iconimage,name,htmlInfo[i],category,info);



	//append list to sidebar

			var listItem = document.createElement('li');

			var listItemLink = listItem.appendChild(document.createElement('a'));

			//listItemLink.href = 'javascript:popUp( '+ i +' )';

			listItemLink.href = 'http://www.chiangdao.com/bangkokmap/location/' + name.replace(/ /g,"+");

			listItemLink.innerHTML = name + '<br />';	

			switch(category){

			case 'attractions':

				document.getElementById('Attractions').appendChild(listItem);

				break;	

			case 'hotels':

				document.getElementById('Hotels').appendChild(listItem);

				break;

			case 'restaurants':

				document.getElementById('Restaurants').appendChild(listItem);

				break;

			case 'shopping':

				document.getElementById('Shopping').appendChild(listItem);

				break;

			case 'transports':

				document.getElementById('Transports').appendChild(listItem);

				//listItemLink.onclick = focusPoint;

				break;

			}



		}//for



    if(qword.length > 2 && mresults.length){

		var iam = 0;

		while (iam < mresults.length) {

			makeSearchResult(mresults[iam],i);

			iam++;

			i=i+1;

		}

	}

	else{

		var listItem = document.createElement('li');

		var listItemLink = listItem.appendChild(document.createElement('p'));

		listItemLink.innerHTML = 'Your search for ' + qword + ' did not match any data.<br />';

		document.getElementById('Search-Results').appendChild(listItem);			
  }

  getManager();

  if(venue){
    myShowVenue()
  }
}
}

request.send(null);



}

function myShowVenue() {
  var found;
  var ind = -1;
  markfor:			
  for(ind=0;ind<batch.length;ind++){
    if(venue == batch[ind].name){
      found = true;
      break markfor;	
    }
  }

  if (found) {

    map.setCenter(batch[ind].latlng);

    if (batch[ind].isHidden()) {
      setTimeout('myShowVenue()', 500);
    }
    else {
      popUp(ind,1);
    }
  }
}


function getManager(){

	mgr = new GMarkerManager(map);

	mgr.addMarkers(batch,11,16);

	mgr.refresh();

}



function getList(category){

	Element.hide('Hotels');

	Element.hide('Attractions');

	Element.hide('Shopping');

	Element.hide('Restaurants');

	Element.hide('Transports');

	Element.hide('Search-Results');

	Element.show(category);

	categoryList = category;

	document.getElementById('nav').innerHTML = '<img src="/bangkokmap/icon/icon_' + category + '.png" style="border:none; vertical-align:middle;"> Bangkok ' + category;

}



function popUp(i,cume){

	map.setCenter(batch[i].latlng);

	//batch[i].openInfoWindowHtml(batch[i].html,{maxWidth:300});

	//alert(batch[i].category);

	if(cume == 1){

	switch (batch[i].category) {

		case 'attractions':

			getList('Attractions');

			break;

		case 'transports':

			getList('Transports');

			break;

		case 'restaurants':

			getList('Restaurants');

			break;

		case 'shopping':

			getList('Shopping');

			break;

		default:			

  			getList('Hotels'); 	

			break;

	}

	batch[i].openInfoWindowHtml('<div style="font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif; font-size: 13px;">' + batch[i].html + '</div>',{maxWidth:300});	

	document.getElementById('hotlink').href = 'http://' + batch[i].info;

	}//if

	else{

	batch[i].openInfoWindowHtml('<div style="font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif; font-size: 13px;">' + batch[i].name + '</div>',{maxWidth:300});

	}

	//batch[i].openInfoWindowHtml('<div style="font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif; font-size: 13px;">' + batch[i].name + '</div>',{maxWidth:300});



	//document.getElementById('venue-info').innerHTML = batch[i].html;	

}



function venuePopup(venueName){



}

window.onload = init;





function createMarker(point,iconimage,name,htmlInfo,category,info){

	var icon = new GIcon();

	icon.image = "/bangkokmap/icon/" + iconimage;

	icon.iconSize = new GSize(23, 23); // the size(Width,Height) of icon image in pixel

	icon.iconAnchor = new GPoint(12, 12); // the pixel in icon image to place the location. Here we put the icon image at the middle.

 	icon.infoWindowAnchor = new GPoint(12, 12); // the pixel in icon image to show the info window.

	var marker = new GMarker(point,{icon:icon,title:name});

	var focusPoint = function() {

		marker.openInfoWindowHtml(htmlInfo);

		//marker.openInfoWindowHtml('<div style="font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif; font-size: 13px;">' + name + '</div>');

		//document.getElementById('venue-info').innerHTML = htmlInfo;

		return false;

	}

	GEvent.addListener(marker, 'click', focusPoint);

	marker.html = htmlInfo;

	marker.latlng = point;

	marker.name = name;

	marker.category = category;

	marker.info = info;

	batch.push(marker);

}



function showhide(){

	if(showingList){

		Element.hide('Hotels');

		Element.hide('Attractions');

		Element.hide('Shopping');

		Element.hide('Restaurants');

		Element.hide('Transports');

		Element.hide('Search-Results');

		showingList = !showingList;

	}

	else{

		Element.show(categoryList);

		showingList = !showingList;

	}	

}



function makeSearchResult(resultData, mindex) {

		var mpoint = new GLatLng(resultData.latitude,resultData.longitude);

		createMarker(mpoint,'icon_arrow.png',resultData.nameEN,'null','','');

		var listItem = document.createElement('li');

		var listItemLink = listItem.appendChild(document.createElement('a'));

		listItemLink.href = 'javascript:popUp( '+ mindex +',0 )';

		//listItemLink.href = 'http://www.chiangdao.com/bangkokmap/places/' + resultData.nameEN;

		listItemLink.innerHTML = resultData.nameEN + '<br />';

		document.getElementById('Search-Results').appendChild(listItem);

}