var markers = new Array();
var htmls = new Array();
var locs = new Array();
var extmarkers = new Array();
var exthtmls = new Array();
var extlocs = new Array();
var map;
function load() {
	if (GBrowserIsCompatible()) {
		map = new GMap2($("map"));
		map.setCenter(new GLatLng(44.149265, -79.878759), 11);
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		geocoder = new GClientGeocoder();
		GEvent.addListener(map, "click", getAddress);
		for (x in extmarkers) {
			if(!isNaN(x)) {
				var loc1 = parseFloat(extlocs[x].split(',')[0]);
				var loc2 = parseFloat(extlocs[x].split(',')[1]);
				addNewMarker(loc1,loc2,exthtmls[x],false);
			}
		}
	}
}

function removeMyMarker(id) {
	map.removeOverlay(markers[id]);
	map.closeInfoWindow();
	markers.splice(id,1);
	htmls.splice(id,1);
	locs.splice(id,1);
}

function getAddress(overlay, latlng) {
	if (latlng != null) {
		address = latlng;
		geocoder.getLocations(latlng, showAddress);
	}
}

function getLastItem(array) {
	var last = 0;
	for (x in array) {
		if(!isNaN(x)) {
			last = x;
		}
	}
	return last;
}

function showAddress(response) {
	if (!response || response.Status.code != 200) {
		alert("Status Code:" + response.Status.code);
	} else {
		place = response.Placemark[0];
		addNewMarker(place.Point.coordinates[1],place.Point.coordinates[0],place.address);
	}
}

function addNewMarker(x,y,desc,openWindow) {
	if(openWindow==null) {
		openWindow = true;
	}
	point = new GLatLng(x,y);
	var marker = new GMarker(point);
	markers.push(marker);
	htmls.push(desc);
	locs.push(x+","+y);
	var id = getLastItem(markers);
	GEvent.addListener(marker,'click',function(temp) {
		myHtml = 'Name of the Location:<br>';
		myHtml += '<input type="text" rel="' + id + '" style="width: 200px;" value="' + htmls[id].split('|||')[0] + '" /><br><br>';
		myHtml += 'Address:<br>';
		myHtml += '<input type="text" rel="' + id + '" style="width: 200px;" value="' + htmls[id].split('|||')[1] + '" /><br>';
		myHtml += '<input type="button" value="Save" id="save" onclick="updateHtml(this)" />';
		myHtml += '<div class="clear" style="height:10px;"></div>';
		myHtml += '<a href="javascript:void(0);" onclick="removeMyMarker(' + id + ')" style="color:#F00;text-decoration:none">remove marker</a>';
		markers[id].openInfoWindowHtml(myHtml);
	});
	map.addOverlay(marker);
	myHtml = 'Name of the Location:<br>';
	myHtml += '<input type="text" rel="' + id + '" style="width: 200px;" value="' + htmls[id] + '" /><br><br>';
	myHtml += 'Address:<br>';
	myHtml += '<input type="text" rel="' + id + '" style="float:left; width: 200px;" value="' + htmls[id] + '" />';
	myHtml += '<input type="button" value="Save" id="save" onclick="updateHtml(this)" />';
	myHtml += '<div class="clear" style="height:10px;"></div>';
	myHtml += '<a href="javascript:void(0);" onclick="removeMyMarker(' + id + ')" style="color:#F00;text-decoration:none">remove marker</a>';
	if(openWindow) {
		marker.openInfoWindowHtml(myHtml);
	}
}

function updateHtml(obj) {
	var el = obj.getPrevious().getPrevious();
	var elm = el.getPrevious().getPrevious().getPrevious().getPrevious();
	var id = el.get('rel');
	htmls[id] = elm.value + '|||' + el.value;
	markers[id].closeInfoWindow();
}

function serialize() {
	var data = '';
	console.log(locs);
	if(locs.length>0) {
		data = 'locs[]=' + locs.join('&locs[]=');
		data += '&';
		data += 'descs[]=' + htmls.join('&descs[]=');
	}
	return data;
}