/* Google Map initialization */

var map = null;
var mgr = null;
var allmarkers = new Map();
var itemsIds = new Array();
var redirectPath = "";
var oldSelectedLi = null;

var MIN_ZOOM = 0;
var MAX_ZOOM = 17;

function initialize() {
	if (GBrowserIsCompatible()) {
		
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(43.68744103354153, -79.60800647735596), 5);
		// rendering first info window needs for initializing popup window node
		map.openInfoWindow(map.getCenter(), document.createTextNode(""));
		map.closeInfoWindow();
		map.setUIToDefault();
		map.disableDoubleClickZoom();
		map.disableScrollWheelZoom();
  		
  		mgr = new MarkerManager(map, {trackMarkers:true}); 
  		
		if (typeof addSightingListener == 'function') {
			addSightingListener();
		}
		
		if (typeof initSightingsFunc == 'function') {
			initSightingsFunc();
		}
	}
}

function goToCenter(lat, lng, radius, showBallon) {
	var latlng = new GLatLng(lat,lng);
	var zoom = 3;
	if (radius == null) {
		zoom = 3;
	} else if (radius <= 5) {
		zoom = 11;
	} else if (radius <= 10) {
		zoom = 9;
	} else if (radius <= 20) {
		zoom = 8;
	} else if (radius <= 50) {
		zoom = 7;
	} else if (radius <= 100) {
		zoom = 6;
	} else if (radius <= 200) {
		zoom = 5;
	} else if (radius <= 500) {
		zoom = 4;
	} else if (radius <= 1500) {
		zoom = 3;
	} else if (radius <= 2000) {
		zoom = 2;
	} else if (radius <= 5000) {
		zoom = 1;
	}
	
	/*
	switch (radius) {
		case 5 : zoom = 12; break;
		case 10 : zoom = 10; break;
		case 20 : zoom = 9; break;
		case 50 : zoom = 8; break;
		case 100 : zoom = 7; break;
		case 200 : zoom = 6; break;
		case 500 : zoom = 5; break;
		default: zoom = 3 ;
	}
	*/
	if (lat != 0 && lng != 0) {
		map.setCenter(latlng, zoom);
	}
	
	if (showBallon) {
		map.openInfoWindow(map.getCenter(), document.createTextNode("You are here"));
	}
}

/*Add marker function*/

function newMarker (s) {
	var latlng = new GLatLng(s.lat,s.lng);
	var marker = new GMarker(latlng, {draggable: false});
	marker.value = s.id;
	marker.html = myHtmlSmall(s);
	marker.src = s.src;
	GEvent.addListener(marker, "click", function(latlng) {
		map.openInfoWindowHtml(latlng, marker.html);
	});
	allmarkers.put(s.id, marker);
	mgr.addMarker(marker, MIN_ZOOM, MAX_ZOOM);
}

/*Add marker function A*/

function newMarkerA (s) {
	var latlng = new GLatLng(s.lat,s.lng);
	var marker = new GMarker(latlng, {draggable: true});
	marker.value = s.id;
	marker.html = myHtmlFull(s);
	marker.src = s.src;
	GEvent.addListener(marker, "click", function(latlng) {
		map.openInfoWindowHtml(latlng, marker.html);
		initEditEvents(s.id, map, marker);
	});
		
	GEvent.addListener(marker, "dragstart", function() {
		map.closeInfoWindow();
	});
	GEvent.addListener(marker, "dragend", function(latlng) {
		map.openInfoWindowHtml(latlng, myHtmlMove(s));
		Event.observe("moveSightingsLink" + s.id, "click", function(event) {
			moveSighting(s.id, map, marker, latlng, s);
			event.stop();
		});
		Event.observe("cancelMoveSightingsLink" + s.id, "click", function(event) {
			deleteMarker(s.id);
			newMarkerA(s);
			map.closeInfoWindow();
			event.stop();
		});
	});
	allmarkers.put(s.id, marker);
	mgr.addMarker(marker, MIN_ZOOM, MAX_ZOOM);
}

function deleteMarker(id) {
	mgr.removeMarker(allmarkers.get(id));
	allmarkers.remove(id);
}
   
function clearMarkers() {
	mgr.clearMarkers();
}
  
function reloadMarkers() {
	//
}

function initEditEvents(id, map, marker) {
		Event.observe("removeSightingsLink" + id, "click", function(event) {
			removeSighting(id, map, marker); 
			event.stop();
		});
		Event.observe("editSightingsLink" + id, "click", function(event) {
			editSighting(id, map, marker); 
			event.stop();
		});
		Event.observe("showSightingsEditForm" + id, "click", function(event) {
			$("sightingsViewForm" + id).hide(); 
			$("sightingsEditForm" + id).show(); 
			event.stop();
		});
		Event.observe("cancelEditSightingsLink" + id, "click", function(event) {
			$("sightingsEditForm" + id).hide();
			$("sightingsViewForm" + id).show();  
			event.stop();
		});
}

/* ----------------------- */
/* Sightings DWR functions */
/* ----------------------- */

/* add Sighting to entry function */

function addSightingEntry(entryId, map, latlng, src) {
	div = $("infoWindow");
	error = $("sightingError");
	name = $F('sightingName');
	description = $F('sightingDescription');
	dateTime = $F('sightingDateTime');
	accessPrivate = $F('sightingAccessPrivate');
	accessPublic = $F('sightingAccessPublic');
	access = (accessPrivate != null && accessPrivate == 'on') ? 0 : 1;
	if (name) {
		div.innerHTML = "Adding sighting. Please wait...";
		SightingsController.addSightingToEntry(name, description, dateTime, access, latlng.lat(), latlng.lng(), entryId, function(data) {
			if (data) {
				div.innerHTML = "added";
				newMarkerA({id:data.id, lat:data.lattitude, lng:data.longitude, name:data.name, desc:data.description, date:data.formattedDateTime, src:src, user:data.user.username});
			} else {
				div.innerHTML = "failed";
			}
		});
	} else {
		error.innerHTML = 'Enter name';
	}
}

/* add Sighting to species function */

function addSightingSpecies(speciesId, map, latlng, src) {
	div = $("infoWindow");
	error = $("sightingError");
	name = $F('sightingName');
	description = $F('sightingDescription');
	dateTime = $F('sightingDateTime');
	accessPrivate = $F('sightingAccessPrivate');
	accessPublic = $F('sightingAccessPublic');
	access = (accessPrivate != null && accessPrivate == 'on') ? 0 : 1;
	if (name) {
		div.innerHTML = "Adding sighting. Please wait...";
		SightingsController.addSightingToSpecies(name, description, dateTime, access, latlng.lat(), latlng.lng(), speciesId, function(data) {
			if (data) {
				div.innerHTML = "Added successfull<br/>";
				newMarkerA({id:data.id, lat:data.lattitude, lng:data.longitude, name:data.name, desc:data.description, date:data.formattedDateTime, src:src, user:data.user.username});
				if (itemsIds != null && itemsIds.length > 0) {
					SightingsController.linkMediaItems(data.id, itemsIds, function () {
						div.innerHTML += "Linked to mediaItems successfull";
						itemsIds = new Array();
						setTimeout(window.location.href = redirectPath , 3000);
					});
				}
			} else {
				div.innerHTML = "Failed";
			}
		});
	} else {
		error.innerHTML = 'Enter name';
	}
}

/* remove Sighting function */

function removeSighting(sightingId, map, marker) {
	if (confirm('Are you sure?')) {
		div = $("infoWindow" + sightingId);
		div.innerHTML = "Removing sighting. Please wait...";
		
		SightingsController.removeSighting(sightingId, function(data) {
			div.innerHTML = "Removed successfull";
			deleteMarker(sightingId);
		});
	}	
}

/* edit Sighting function */

function editSighting(sightingId, map, marker) {
	div = $("infoWindow" + sightingId);
	error = $("sightingError" + sightingId);
	name = $F('sightingName' + sightingId);
	dateTime = $F('sightingDateTime' + sightingId);
	description = $F('sightingDescription' + sightingId);
	if (name) {
		div.innerHTML = "Editing sighting. Please wait...";
		SightingsController.editSighting(sightingId, name, description, dateTime, function(data) {
			if (data) {
				src = marker.src;
				div.innerHTML = "Edited successfull";
				deleteMarker(sightingId);
				newMarkerA({id:data.id, lat:data.lattitude, lng:data.longitude, name:data.name, desc:data.description, date:data.formattedDateTime, src:src, user:data.user.username});
			} else {
				div.innerHTML = "Failed";
			}
		});
	} else {
		error.innerHTML = 'Enter name';
	}
}

/* move Sighting function */

function moveSighting(sightingId, map, marker, latlng, old) {
	div = $("infoWindow" + sightingId);
	div.innerHTML = "Moving sighting. Please wait...";
	SightingsController.moveSighting(sightingId, latlng.lat(), latlng.lng(), function(data) {
		if (data) {
			src = marker.src;
			div.innerHTML = "Moved successfull";
			deleteMarker(sightingId);
			newMarkerA({id:data.id, lat:data.lattitude, lng:data.longitude, name:data.name, desc:data.description, date:data.formattedDateTime, src:src, user:data.user.username})
		} else {
			div.innerHTML = "Failed";
			deleteMarker(sightingId);
			newMarkerA(old);
		}
	});
}

/* util functions */

function showMarkerA(id, lat, lng, edit) {
	if (allmarkers.get(id) != null) {
		map.panTo(new GLatLng(lat, lng));
		map.openInfoWindow(new GLatLng(lat, lng), allmarkers.get(id).html);
		initEditEvents(id, map, allmarkers.get(id));
		if (edit != null && edit == 'edit') {
			expandEdit(id);
		}
	}
	// mark selected sightings items on the list
	if (oldSelectedLi != null) {
		oldSelectedLi.removeClassName('selected');
	}
	li = $('li'+id);
	if (li != null) {
		li.addClassName('selected');
		oldSelectedLi = li;
	}
	return false;
}

function showMarker(id, lat, lng) {
	if (allmarkers.get(id) != null) {
		map.panTo(new GLatLng(lat, lng));
		map.openInfoWindow(new GLatLng(lat, lng), allmarkers.get(id).html);
	}
	// mark selected sightings items on the list
	if (oldSelectedLi != null) {
		oldSelectedLi.removeClassName('selected');
	}
	li = $('li'+id);
	if (li != null) {
		li.addClassName('selected');
		oldSelectedLi = li;
	}
	return false;
}

function showMediaWindow(id, lat, lng) {
	myLightWindow.activateWindow(
		{href: '#sightingsMediaItems', type: 'inline', width: 300, height:350}
	);
	SightingsController.getAllMediaItems(function(data) {
		var select = $$('.select-items-list')[1];
		select.innerHTML = '';
		
		$H(data).each(function (set) {
			optiongroup = Builder.node('optgroup', {label : set.key});
			select.appendChild(optiongroup);
			$A(set.value).each(function(item) {
				selected = item.id;
				option = Builder.node('option', {value : item.id}, item.comments);
				optiongroup.appendChild(option);
			});
		});
		select.options.selectedIndex = -1; 
		select.style.visibility = 'visible';
		
		if (id) {
			sightingId = $$('.sighting-id')[1];
			sightingId.value = id;
		
			selectButton = $$('.select-items-button')[1];	
			Event.observe(selectButton, 'click', function(e) {linkMediaItems(id, lat, lng)});
			
			SightingsController.getMediaItems(id, function(data) {
				$A(select.options).each(function(option) { 
					$A(data).each(function (item) {
						if (option.value == item.id) {
							option.selected = true;
						}
					});
				});
			});		
		} else {
			selectButton = $$('.select-items-button')[1];
			Event.observe(selectButton, 'click', setMediaItems);
		}
		
	});
	SightingsController.getAllAlbums(function(data) {
		var select = $$('.select-albums-list')[1];
		select.innerHTML = '';
		
		$A(data).each(function (album) {
			option = Builder.node('option', {value : album.id}, album.name);
			select.appendChild(option);
		});
		select.options.selectedIndex = -1; 
		select.style.visibility = 'visible';
		if (id) {
			$$('.return-query-string')[1].value = "sid=" + id + "&slat=" + lat + "&slng=" + lng;
		} else {
			$$('.return-query-string')[1].value = "sid=new" + "&slat=" + lat + "&slng=" + lng;
		}
	});
	return false;
}

function linkMediaItems(id, lat, lng) {
	sightingId = $$('.sighting-id')[1];
	select = $$('.select-items-list')[1];

	j = 0;	
	itemsIds = new Array();
	for(i = 0; i < select.options.length; i++) {
		if (select.options[i].selected) {
			itemsIds[j++] = select.options[i].value;
		}
	}
	
	SightingsController.linkMediaItems(sightingId.value, itemsIds, function (data) {
		myLightWindow.deactivate();
		$("audubonNotificationText").innerHTML = "Sighting has been linked with media items";
		$("audubonNotification").show();
		new Effect.Highlight('audubonNotification', {startcolor: "#407437", restorecolor: "#ffffff"});
		setTimeout(window.location.href = redirectPath + "&sid=" + id + "&slat=" + lat + "&slng=" + lng, 3000);
	});
	return false;
}

function setMediaItems() {
	select = $$('.select-items-list')[1];

	j = 0;	
	itemsIds = new Array();
	for(i = 0; i < select.options.length; i++) {
		if (select.options[i].selected) {
			itemsIds[j++] = select.options[i].value;
		}
	}
	myLightWindow.deactivate();
	
	return false;
}

function formate(dateMs) {
	var date = new Date(dateMs);
	var month = date.getMonth() + 1;
	var day = date.getDate();
	var year = date.getFullYear();
	return(month + "/" + day + "/" + year);
}

/* Html functions */

function getItemsImages(items) {
	itemsHtml = '';
	if (items != null) {
		items.each(function (src) {
			itemsHtml += '<img style="margin:2px;" width="50" src="' + src + '" alt="" />';
		});
	}
	return itemsHtml;
}

function myHtmlSmall(s) {
	html = 
	'<div id="infoWindow' + s.id + '" style="min-height:150px; width:230px">' +
		'<div id="sightingsViewForm' + s.id + '" style="display:block;">' + 
			'<img src="' + s.src + '" alt="' + s.name + '" width="50" style="margin:5px" align="left" />' +
			'<b>' +	s.name + '</b><br/>' + s.desc + '<br/>' + (s.date != null ? s.date + '<br/>' : '') +
			'<a href="' + CONTEXT_PATH + '/userInfo.html?username=' + s.user + '"><i>' + s.user + '</i></a>' +
			'<br style="clear:both"/>' +
			getItemsImages(s.items) +
		'</div>' +
	'</div>';
	return html;
}

function myHtmlFull(s) {
	html = 
	'<div id="infoWindow' + s.id + '" style="min-height:150px; width:230px">' +
		'<div id="sightingsViewForm' + s.id + '" style="display:block;">' + 
			'<img src="' + s.src + '" alt="' + s.name + '" width="50" style="margin:5px" align="left" />' +
			'<b>' + s.name + '</b><br/>' + s.desc + '<br/>' + (s.date != null ? s.date + '<br/>' : '') + 
			'<a href="' + CONTEXT_PATH + '/userInfo.html?username=' + s.user + '"><i>' + s.user + '</i></a>' +
			'<br style="clear:both"/>' +  
			getItemsImages(s.items) +
			'<br style="clear:both"/>' +
			'<a href="#" onclick="return showMediaWindow(' + s.id + ', ' + s.lat + ', ' + s.lng + ');" ><img src="' + CONTEXT_PATH + '/images/image.png" /></a>&nbsp;' +
			'<a id="showSightingsEditForm' + s.id + '" href="#"><img src="' + CONTEXT_PATH + '/images/edit2.jpg" /></a>&nbsp;' +
			'<a id="removeSightingsLink' + s.id + '" href="#"><img src="' + CONTEXT_PATH + '/images/delete2.jpg" /></a><br/>' +
		'</div>' +
		'<div id="sightingsEditForm' + s.id + '" style="display:none;">' +
			'<form action="" onsubmit="return false;" class="map-form">' +
				'<label for="sightingName' + s.id + '">Name</label><input class="input" type="text" name="sightingName' + s.id + '" id="sightingName' + s.id + '" value="' + s.name + '" disabled="disabled" /><br/>' +
				'<label for="sightingDescription' + s.id + '">Description</label><textarea class="input" type="text" name="sightingDescription' + s.id + '" id="sightingDescription' + s.id + '" cols="20" rows="3">' + s.desc + '</textarea><br/>' +
				'<span id="sightingError' + s.id + '" style="visible:hidden; color:#990000"></span><br/>' +
				'<label for="sightingDateTime' + s.id + '">Date</label><input class="input" type="text" name="sightingDateTime' + s.id + '" id="sightingDateTime' + s.id + '" value="' + s.date + '" style="width:130px" />' +
					'<a href="#" id="sightingCalendar' + s.id + '" name="sightingCalendar' + s.id + '" onclick="new CalendarPopup(\'calEdit' + s.id + '\').select($(\'sightingDateTime' + s.id + '\'),\'sightingCalendar' + s.id + '\',\'MM/dd/yyyy\'); return false;">' +
					'<img src="' + CONTEXT_PATH + '/images/cal.png" />' +
					'</a>' +
				'<br/>' +
				'<a href="#" id="editSightingsLink' + s.id + '" value=""><img src="' + CONTEXT_PATH + '/images/save2.jpg" /></a>&nbsp;' + 
				'<a href="#" id="cancelEditSightingsLink' + s.id + '"><img src="' + CONTEXT_PATH + '/images/cancel2.jpg" /></a>' +
			'</form>' +
			'<div id="calEdit' + s.id + '"></div>'
		'</div>'
	'</div>';
	return html;
}

function myHtmlMove(s) {
	html = 
	'<div id="infoWindow' + s.id + '">' +
		'<div id="sightingsMoveForm' + s.id + '" style="display:block;">' + 
			'<b>' + s.name + '</b><br/>' + s.desc + '<br/>' + (s.date != null ? s.date + '<br/>' : '') +
			'<a href="#" id="moveSightingsLink' + s.id + '"><img src="' + CONTEXT_PATH + '/images/move2.jpg" /></a>&nbsp;' +
			'<a href="#" id="cancelMoveSightingsLink' + s.id + '"><img src="' + CONTEXT_PATH + '/images/cancel2.jpg" /></a>'
		'</div>' +
	'</div>';
	return html;
}

function myHtmlAdd(name, lat, lng) {
	var curDate = formatDate(new Date(), 'MM/dd/yyyy');
	html = 
	'<div id="infoWindow">' + 
		'<b>Add sightings here</b>' +
		'<div id="sightingsForm">' +
			'<form action="" onsubmit="return false;" class="map-form">' +
				'<label for="sightingName">Name</label><input class="input" type="text" name="sightingName" id="sightingName" value="' + name + '" disabled="disabled" /><br/>' +
				'<label for="sightingDescription">Description</label><textarea class="input" type="text" name="sightingDescription" id="sightingDescription" cols="20" rows="3"></textarea><br/>' +
				'<span id="sightingError" style="visible:hidden; color:#990000"></span><br/>' +
				'<label for="sightingDateTime">Date</label><input class="input" type="text" name="sightingDateTime" id="sightingDateTime" value="' + curDate + '" style="width:130px" />' + 
					'<a href="#" id="sightingCalendar" name="sightingCalendar" onclick="new CalendarPopup(\'calAdd\').select($(\'sightingDateTime\'),\'sightingCalendar\',\'MM/dd/yyyy\'); return false;">' +
					'<img src="' + CONTEXT_PATH + '/images/cal.png" />' +
					'</a>' + 
				'<br/>' +
				'<label for="sightingAccess">Access</label><input class="radio" type="radio" name="sightingAccess" id="sightingAccessPrivate" /><label><b>Private</b></label>' + 
														'<input class="radio" type="radio" name="sightingAccess" id="sightingAccessPublic" checked="checked" /><label><b>Public</b></label><br/>' +
				'<a href="#" onclick="return showMediaWindow(false, ' + lat + ', ' + lng + ');" ><img src="' + CONTEXT_PATH + '/images/image.png" /></a>&nbsp;' + 
				'<a href="#" id="addSightingsLink"><img src="' + CONTEXT_PATH + '/images/save2.jpg" /></a>&nbsp' +
				'<a href="#" id="cancelAddSightingsLink"><img src="' + CONTEXT_PATH + '/images/cancel2.jpg" /></a>' +
			'</form>' +
			'<div id="calAdd"></div>' + 
		'</div>' +
	'</div>';
	return html;
}

function expandEdit(id) {
	$("sightingsViewForm" + id).hide(); 
	$("sightingsEditForm" + id).show();
}