function prepareData(columns, data) {
	var darray = new Object();
	var l = data.length;
	for (var i = 0 ; i < columns.length ; i++) {
		darray[columns[i]] = new Array();
	}
	for (i = 0 ; i < l ; i++) {
		darray[columns[i%columns.length]].push(data.shift());
	}
	return(darray);
};

// A function to create the marker and set up the event window
function createMarker(point,icon, html, title) {
	var marker = new GMarker(point,{icon:icon, title:title});
	
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
	// The new marker "mouseover" listener        
	//GEvent.addListener(marker,"mouseover", function() {
		//marker.openInfoWindowHtml(html);
	//});        

	return marker;
};

// This function picks up the click and opens the corresponding info window
function myclick(i) {
	gmarkers[i].openInfoWindowHtml(htmls[i]);
};

function makeIcon() {
	// Create the icon for our map marker
	var icon = new GIcon();
	icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
	icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon.iconSize = new GSize(12, 20);
	icon.shadowSize = new GSize(22, 20);
	icon.iconAnchor = new GPoint(6, 20);
	icon.infoWindowAnchor = new GPoint(1, 1);
	return(icon);
};

function GMinit() {
	if (!GBrowserIsCompatible()) {
		alert("Sorry, the Google Maps API is not compatible with this browser");
		return;
	}
	
	var darray = prepareData(columns, data);

	// arrays to hold copies of the markers and html used by the side_bar
	// because the function closure trick doesnt work there
	var gmarkers = [];
	var htmls = [];
	var i = 0;
	// create the map
	var map = new GMap2(document.getElementById("map"));

	var citiesMap = get100CitiesMapType();
 	map.addMapType(citiesMap);

	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(20, 16), 2);
	map.setMapType(G_HYBRID_MAP) 

	var icon= makeIcon();
	for (var i = 0; i < darray["Longitude"].length; i++) {
		// obtain the attribues of each marker
		var lng = parseFloat(darray["Longitude"][i]);
		var lat = parseFloat(darray["Latitude"][i]);
		var city = darray["City"][i];
		var country = darray["Country"][i];
		var flag = "/images/flags/country/" + country + ".gif";

		/* create the marker */
		var point = new GLatLng(lat,lng);
		var html = "<a href='" + city + "/index.html' style='color:blue'>" + city + ", " + country + "</a><br><img src='" + flag + "'>";
		var title = city +", "+ country;
		var marker = createMarker(point, icon, html, title);
		map.addOverlay(marker);

		htmls[i] = html;
		gmarkers[i] = marker;
	}
}









/******** For MSSF WMS server ********************************************/
var citiesProjection = new GCylindricalProjection(); 
function get100CitiesMapType(){

	var layer = "100cities";

	layer0 = new GTileLayer(new GCopyrightCollection(""),0,19);
	layer0.layers= layer;
	layer0.label = layer;
	layer0.format = 'image/png';
	layer0.styles = '';
	layer0.srs = 'JMARS:1';
	layer0.location='http://ms.mars.asu.edu/?';
	layer0.getTileUrl = getTileUrl;
	var layers0 = [layer0];	
	var map0 = new GMapType(layers0, citiesProjection , "ASTER");

	return map0;
}


getTileUrl=function(a,b,c) {

	var pA = new GPoint(a.x*256, (a.y+1)*256);
	var pB = new GPoint((a.x+1)*256, a.y*256);
	
	var A = citiesProjection.fromPixelToLatLng(pA,b,c);
	var B = citiesProjection.fromPixelToLatLng(pB,b,c);

//	A.x += 180;
//	B.x += 180;
    	box =A.x+","+A.y+","+B.x+","+B.y;

	
	var url = createURL(this, box, 256,256);

	return url;
}


function createURL(layers, box,width,height){
	var url=layers.location;
	url+="REQUEST=GetMap";
	url+="&SERVICE=WMS";
	url+="&VERSION=1.1.1";
	url+="&LAYERS="+layers.layers;
	url+="&STYLES="+layers.styles; 
	url+="&FORMAT="+layers.format;
	url+="&BGCOLOR=0x000000"; //"0xFFFFFF";
	url+="&TRANSPARENT=TRUE";
	url+="&SRS="+layers.srs;
 	url+="&BBOX="+box;
	url+="&WIDTH="+width;
	url+="&HEIGHT="+height;
	url+="&reaspect=false";
//	$("debug").innerHTML = url;
	return url;
}
/*************** End of WMS stuff **************/