var trips = new Object;

function showTrack(id)
{
	if (typeof (trips[id]) == 'undefined') {
		loadTrack(id)
	} else {
		if (trips[id].status != 'show') {
			trips[id].addTo(myMap)
			trips[id].status = 'show';
		}

		myMap.fitBounds(trips[id].getBounds());
		return true;
	}
}

function hideTrack(id)
{
	if (typeof (trips[id]) == 'undefined') {
		return true;
	} else {
		if (trips[id].status == 'show') {
			myMap.removeLayer(trips[id]);
		}

		trips[id].status = 'hide';
		return true;
	}
}

function loadTrack(id)
{
	colors = ['red', 'green', 'blue', 'orange'];
	colorIndex = 0;
	tracks = new Array();
	markers = new Array();
	$.ajax({
		url: "/json/track/id/" + id,
		success: function (data) {
			trips[id] = L.featureGroup();

			if (typeof (data.tracks) != 'undefined') {
				for (var i = 0; i < data.tracks.length; i++) {
					color = colors[colorIndex];
					colorIndex = (colorIndex == colors.length-1) ? 0 : colorIndex+1;

					tracks[i] = L.polyline(data.tracks[i].latlngs, {color: color, width: 4, opacity: 0.8});
					tracks[i].bindPopup(data.tracks[i].name);
					trips[id].addLayer(tracks[i])
				}
			}

			if (typeof (data.wayPoints) != 'undefined') {
				for (var i = 0; i < data.wayPoints.length; i++) {
					markers[i] = L.marker([data.wayPoints[i]['lat'], data.wayPoints[i]['lng']], {icon: categories.marker, title: data.wayPoints[i]['name']})
					markers[i].bindPopup('<b>' + data.wayPoints[i]['name'] + '</b><br/>' + data.wayPoints[i]['description']);
					trips[id].addLayer(markers[i])
				}
			}

			showTrack(id)
		}
	});
}