var map;
// Google Spreadsheet key
var param_ssKey = "pbkykyr-0xO6c9qwiV24QWQ";
// Google Spreadsheet worksheet ID
var param_wsId = "od6";
// Starting point of the map
var startPoint = new GLatLng(13.819682014906682, 100.0600004196167);

var zoom = 14;

function init() {
	if (GBrowserIsCompatible()) {
		// create the Map object
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.disableDoubleClickZoom();
		map.enableScrollWheelZoom();
		map.setCenter(startPoint, zoom);
		// Retrieve the store location data from Google Spreadsheets
		getJSON();
	}
}

/* Function to retrieve data from a Google Spreadsheet, published as a JSON feed. */
function getJSON() {
	// Create and insert a <script/> element in the document, where the source of the
	//  script is the feed from the Google Spreadsheet with a defined call-back function.
	var script = document.createElement('script');
	script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
	+ '/' + param_ssKey + '/' + param_wsId + '/public/values' + '?alt=json-in-script&callback=loadJSON');
	script.setAttribute('id', 'jsonScript');
	script.setAttribute('type', 'text/javascript');
	document.documentElement.firstChild.appendChild(script);
}

/*
 * Function called when the Google Spreadsheet data has been returned to the browser.
 * @param {String} json - the JavaScript Object Notation string containing data retrieved from the Google Spreadsheet.
 */
function loadJSON(json) {
	// Iterate through the JSON feed, extracting data elements of interest.
	// Each row in the spreadsheet should at a minimum contain a "lat" and "lng" column.
	// Other interesting data could include a store manager, phone number, image (URL), and sales data if this is
	// an internal-facing application.

	for (var i = 0; i < json.feed.entry.length; i++) {
		var func_entry = json.feed.entry[i];
		var func_name = (func_entry["gsx$name"].$t) ? func_entry["gsx$name"].$t : "";		
		var func_schoolName = "<b>โรงเรียน" + func_name + "</b>";
		var func_address = (func_entry["gsx$address"].$t) ? func_entry["gsx$address"].$t : "";
		var func_tumbol = (func_entry["gsx$tumbol"].$t) ? func_entry["gsx$tumbol"].$t : "";
		var func_amphoe = (func_entry["gsx$amphoe"].$t) ? func_entry["gsx$amphoe"].$t : "";
		var func_province = (func_entry["gsx$province"].$t) ? func_entry["gsx$province"].$t : "";
		var func_zipcode = (func_entry["gsx$zipcode"].$t) ? func_entry["gsx$zipcode"].$t : "";
		var func_telephone = (func_entry["gsx$telephone"].$t) ? " " + func_entry["gsx$telephone"].$t : "";
		var func_website = (func_entry["gsx$website"].$t) ? " " + func_entry["gsx$website"].$t : "";
		var func_lat = parseFloat(func_entry["gsx$lat"].$t);
		var func_lng = parseFloat(func_entry["gsx$lng"].$t);
		var func_point = new GLatLng(func_lat,func_lng);
		// Create some interesting HTML to appear when a location marker is selected
		var func_html = "<div><b>" + func_schoolName + "</b><br/>";
		func_html += "<table><tr valign=\"top\"><td>ที่อยู่:</td><td>" + func_address + " ตำบล" + func_tumbol + "<br />อำเภอ" + func_amphoe + " จังหวัด" + func_province + " " + func_zipcode + "</td></tr>";
		func_html += "<tr valign=\"top\"><td>โทรศัพท์:</td><td>" + func_telephone + "</td></tr>";
		func_html += "<tr valign=\"top\"><td>เว็บไซต์:</td><td><a href=\"" + func_website + "\" target=\"_blank\">" + func_website + "</a></td></tr>";
		func_html += "</table></div>";
		// Call a function to create a marker, then push it into the array of locations
		createSchoolMarker(func_point, func_schoolName, func_html);
	}
}

function createSchoolMarker(point, schoolName, html) {
	var func_icon = new GIcon();
	func_icon.image = "http://www.kiterminal.com/blog/sites/default/files/node-43/images/education.gif";
	func_icon.iconSize = new GSize(30, 30);
	func_icon.shadowSize = new GSize(41, 30);
	func_icon.iconAnchor = new GPoint(6, 20);
	func_icon.infoWindowAnchor = new GPoint(5, 1);
	var func_markerOpts = {};
	func_markerOpts.icon = func_icon;
	func_markerOpts.title = schoolName;
	var func_marker = new GMarker(point, func_markerOpts);
	GEvent.addListener(func_marker, "click", function() {
		func_marker.openInfoWindowHtml(html, {maxWidth:400});
	});
	map.addOverlay(func_marker);
}

setTimeout('init()', 100);