var tracks = new Array;
var maps = new Array;
var markers = new Array;
var icon = L.icon({
	iconUrl: '/ico/marker.png',
	iconSize: [32, 37],
	iconAnchor: [16, 37],
	popupAnchor: [0, 1]
});

function saveChangesTrip(id)
{
	$('#tripSavedOK').hide();
	$('#tripSavedError').hide();

	$.ajax({
		url: "/edittrack/trip/id/" + id,
		method: "POST",
		data: {
			name: $('#tripName').val(),
			description: $('#tripDescription').val(),
			isPublic: $('#tripIsPublic').prop('checked')
		},
		success: function (data) {
			$('#tripSavedOK').show();
			setTimeout(function () {
				$('#tripSavedOK').fadeOut(300);
			}, 2000);
		},
		error: function (data) {
			$('#tripSavedError').show();
		}
	});
}

function saveChangesTrack(id)
{
	$('#trackSavedOK').hide();
	$('#trackSavedError').hide();

	$.ajax({
		url: "/edittrack/track/id/" + id,
		method: "POST",
		data: {
			name: $('#trackName' + id).val(),
			description: $('#trackDescription' + id).val()
		},
		success: function (data) {
			$('#trackSavedOK').show();
			setTimeout(function () {
				$('#trackSavedOK').fadeOut(300);
			}, 2000);
		},
		error: function (data) {
			$('#trackSavedError').show();
		}
	});
}

function saveChangesWaypoint(id)
{
	$('#waypointSavedOK').hide();
	$('#waypointSavedError').hide();

	$.ajax({
		url: "/edittrack/waypoint/id/" + id,
		method: "POST",
		data: {
			name: $('#waypointName' + id).val(),
			description: $('#waypointDescription' + id).val()
		},
		success: function (data) {
			$('#waypointSavedOK').show();
			setTimeout(function () {
				$('#waypointSavedOK').fadeOut(300);
			}, 2000);
		},
		error: function (data) {
			$('#waypointSavedError').show();
		}
	});
}

function loadTrackDetails(id)
{
	$('#trackpointsContainer' + id).toggle();
	if ($('#trackpointsMap' + id).text() != '') {
		return true;
	}

	$.ajax({
		url: "/edittrack/gettrackdetails/id/" + id,
		method: "POST",
		success: function (data) {
			$('#trackpointsList' + id).html('');
			if (typeof (data) != 'undefined') {
				latlngs = new Array();
				for (var i = 0; i < data.length; i++) {
					$(makeRow(data[i])).appendTo('#trackpointsList' + id);
					latlngs.push({lat: data[i]['lat'], lng: data[i]['lng']})

				}

				maps[id] = L.map('trackpointsMap' + id, {zoomControl: true, scrollWheelZoom: false}).setView([latlngs[0]['lat'], latlngs[0]['lng']], 13);
				L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
					attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
				}).addTo(maps[id]);

				tracks[id] = L.polyline(latlngs, {color: '#F00', width: 4, opacity: 0.8});
				maps[id].addLayer(tracks[id]);

				markers[id] = L.marker([latlngs[1]['lat'], latlngs[1]['lng']], {icon: icon});
				maps[id].addLayer(markers[id])

				maps[id].fitBounds(tracks[id].getBounds());
			}
		},
		error: function (data) {
			console.log(data);
		}
	});
}

function makeRow(data)
{
	row = '<div class="trackPoint" onmouseover="moveMarker(' + data.trackId + ', ' + data.lat + ', ' + data.lng + ')">';
	row += data.lat + ' / ' + data.lng;
//	row += data.id + ' - ' + data.lat + ' / ' + data.lng;
	row += ' <a href="/edittrack/cut/id/' + data.id + '" class="btn btn-default btn-sm" title="Разрезать трек в этой точке"><span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span></a> ';
	row += '</div>';
	return row;
}

function moveMarker(mapId, lat, lng)
{
	markers[mapId].setLatLng([lat, lng]);
	maps[mapId].setView([lat, lng], maps[mapId].getZoom());
}