var map;
var markers = {};

function getLatLng(venue, geocoder) {
    var v = venue.split(',');
    var addy = v[4] + ", " + v[5] + ", VA";
    geocoder.geocode({
	"address": addy
    }, function(results) {
	var loc = results[0].geometry.location;
        var res = {};
	res.name = v[1];
	res.id = 'H' + v[0];
	res.type = "point";
	res.dest = {external: v[3]};
	res.coordinates = {lat: loc.lat(), lng: loc.lng()};

	console.log(JSON.stringify(res) + ',');
    });
}

var gll = 0;
var geocoder;

var hotels = [
"189,Wakefield Park,awaiting drone video,awaiting FAA permissions,8100 Braddock Road,Annandale,Sports Facility"
];

function nextLatLng() {
    if (gll < hotels.length) {
	getLatLng(hotels[gll], geocoder);
	gll++;
	setTimeout(nextLatLng, 500);
    }
}

var boundzoom = null;

function initMap() {
//geocoder = new google.maps.Geocoder();
//nextLatLng();

    const FAIRFAX_BOUNDS = love ? {
        north: 39.06,
        south: 38.61,
        west: -77.54,
        east: -76.90,
    } : {
        north: 39.06,
        south: 38.50,
        west: -77.54,
        east: -76.90,
    };
    const FAIRFAX_CENTER = { lat: 38.8514054, lng: -77.3083107 };

    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(FAIRFAX_CENTER),
	restriction: {
	    latLngBounds: FAIRFAX_BOUNDS,
	    strictBounds: false,
	},
        zoom: 0, //(smallwin ? 9 : 10),
        mapTypeControl: false,
        streetViewControl: false,
        mapId: love ? '7a6d27e426dd7dd4' : 'fce576f56bfc3524'
    });


    if (false && love) {
	boundzoom = map.addListener("bounds_changed", () => {
	    var z = map.getZoom();
	    if (z > 0) {
		z++;
		map.setZoom(z);
		console.log("DBG: At zoom level " + z);
		google.maps.event.removeListener(boundzoom);
	    }
	});
    }

    new google.maps.Marker({
        position: { lat: 38.88984244166753, lng: -77.00904182339231 },
        title: 'United States Capitol',
        map,
        icon: {
            url: 'Interest/icons/capitol.svg',
            scaledSize: new google.maps.Size(41, 31),
        }
    });

    new google.maps.Marker({
        position: { lat: 38.7752873, lng: -76.96 },
        title: 'Maryland',
        map,
        icon: {
            url: 'Interest/icons/label_md.png',
            scaledSize: new google.maps.Size(73, 19),
        }
    });
    new google.maps.Marker({
        position: { lat: 38.9875001, lng: -77.1082722 },
        title: 'Maryland',
        map,
        icon: {
            url: 'Interest/icons/label_md.png',
            scaledSize: new google.maps.Size(73, 19),
        }
    });
    new google.maps.Marker({
        position: { lat: 38.6998387, lng: -77.4179154 },
        title: 'Virginia',
        map,
        icon: {
            url: 'Interest/icons/label_va.png',
            scaledSize: new google.maps.Size(73, 19),
        }
    });
    new google.maps.Marker({
        position: { lat: 38.9524997, lng: -77.5176681 },
        title: 'Virginia',
        map,
        icon: {
            url: 'Interest/icons/label_va.png',
            scaledSize: new google.maps.Size(73, 19),
        }
    });

    map.data.loadGeoJson('Interest/boundaries.json');        
    //map.data.loadGeoJson('fairfax.json');


    map.data.setStyle(function(feature) {
	var opacity = feature.getProperty('opacity');
	var fill = feature.getProperty('fill');
	if (love) {
	    var p = feature.getProperty('place');
	    if ('fairfax' == p) {
		opacity = 1;
		fill = '#EEEEEE'; //'#D8D8D8';
	    }
	    else if ('arlington' == p || 'alexandria' ==  p || 'dc' == p) {
		opacity = .5;
		fill = '#FFFFFF';
	    }
	}
        return {
	    icon: feature.getProperty('icon'),
	    title: feature.getProperty('title'),
	    label: {
              color: "#fff",
              fontFamily: "Open Sans",
              fontSize: "9px",
              fontWeight: "bold",
              text: feature.getProperty('marker-symbol')
            },
            fillColor: fill,
            fillOpacity: opacity,
            strokeColor: feature.getProperty('stroke'),
            strokeWeight: 1
          };
        });

/*
	let menu = document.querySelector("ul#menu");
	for (let c = 0; c < menuItems.length; c++) {
	    let li = buildListItem(menuItems[c]);
	    menu.appendChild(li);
	}
*/
/*
        map.data.addListener('click', function(event) {
          document.getElementById('marker-' + event.feature.getProperty('marker-symbol')).click();
        });
*/
/*
    google.maps.event.addListener(map, 'click', function(event) {
	console.log(',{"name":"","coordinates":{"lat":' + Math.round(event.latLng.lat() * 2000) / 2000 + ',"lng":' + Math.round(event.latLng.lng() * 2000) / 2000 + '}}');
    });
*/
}

function findGetParameter(parameterName) {
    var result = null,
    tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
            tmp = item.split("=");
            if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

function doOpenLink(dest) {
    let opener = document.querySelector("#opener");
    if (dest.id360) {
	opener.href = site360 + "?loc=" + dest.id360;
	opener.click();
    }
    else if (dest.matterport) {
        opener.href = 'https://my.matterport.com/show/?m=' + dest.matterport;
        opener.click();
    }
    else if (dest.youtube) {
        opener.href = 'https://www.youtube.com/embed/' + dest.youtube;
        opener.click();
    }
    else if (dest.external) {
        opener.href = dest.external;
        opener.click();
    }
    else if (dest.newwindow) {
	window.open(dest.newwindow, "_blank");
    }
}

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
	document.querySelector("#burger").addEventListener("click", function() {
	    let panel = document.querySelector("#interface");
	    let closed = ("closed" == this.dataset.state);
	    panel.style.width = (closed ? "200px" : "32px");
	    panel.style.height = (closed ? "100%" : "32px");
	    panel.style.overflowY = (closed ? "auto" : "hidden");
	    this.dataset.state = (closed ? "opened" : "closed");
        });


	var idx = 0;

	let buildListItem = function(node, icon, group) {
	    if ("undefined" != typeof markers[node.id]) {
		console.warn("Previously seen marker: " + node.id);
	    }
	    if (node.marker && node.marker.icon) {
		icon = node.marker.icon;
		if (true == icon.resize) {
		    icon.scaledSize = new google.maps.Size(90, 110);
		    icon.origin = new google.maps.Point(0, 0);
		    icon.anchor = new google.maps.Point(45, 110);
		}
	    }
	    if (node.group) group = node.group;

            let name = document.createElement("span");
            name.appendChild(document.createTextNode(node.name));
            name.dataset.id = node.id;
	    let li = document.createElement("li");
	    li.appendChild(name);
            li.id = node.id;
            li.dataset.active = 'no';

	    if (node.type == "interest" || node.type == "metro") {
		let current = [];
		if (node.line) {
		    current.push(new google.maps.Polyline(node.line));
		}

		for (let loc = 0; loc < node.locations.length; loc++) {
		    current.push(new google.maps.Marker({
			position: node.locations[loc].coordinates,
			title: node.locations[loc].name,
			icon: icon,
			label: {
			    color: "#fff",
			    fontWeight: "bold",
			    fontSize: "1em",
			    text: ("metro" == node.type ? "M" : " ")
			},
			map: null,
		    }));
		}
		markers[node.id] = current;
	    }
	    else if (node.type == "point") {
		idx++;
		name.innerHTML = '' + idx + ". " + name.innerHTML;
		markers[node.id] = new google.maps.Marker({
		    position: node.coordinates,
		    title: node.name,
		    label: {
			color: "#fff",
			fontWeight: "bold",
			fontSize: ".8em",
			text: '' + (icon.resize ? ' ' : idx)
		    },
		    icon: icon,
		    map: null,
		});

		li.addEventListener("mouseenter", () => highlightMarker(node.id, true));
		li.addEventListener("mouseout", () => highlightMarker(node.id, false));
		li.className = (group ? "point360" + group : node.dest.external && 0 < node.dest.external.indexOf("www.fxva") ? "extlink" : "point360");
		li.addEventListener("click", () => {
		    if (node.dest) doOpenLink(node.dest);
		});
		markers[node.id].addListener("click", () => {
		    if (node.dest) doOpenLink(node.dest);
		});
	    }

            name.addEventListener("click", function() {
                event.stopPropagation();
                toggleActivate(this.dataset.id)
            });

	    if ('object' == typeof node.items) {
		let ul = document.createElement("ul");
                ul.addEventListener("click", function() { event.stopPropagation() });
		for (let n = 0; n < node.items.length; n++) {
		    ul.appendChild(buildListItem(node.items[n], icon, group));
		}
		li.appendChild(ul);
                li.className = "collapsed";
                li.addEventListener("click", function() {
                    event.stopPropagation();
                    this.className = ("collapsed" == this.className ? "expanded" : "collapsed");
                })
	    }
	    return li;
	}


	let menu = document.querySelector("ul#menu");
	for (let c = 0; c < menuItems.length; c++) {
	    let li = buildListItem(menuItems[c]);
	    menu.appendChild(li);
	}

	let mparam = findGetParameter("m");
	if (mparam) {
	    let mlist = mparam.split(",");
	    for (let i = 0; i < mlist.length; i++) {
		toggleActivate(mlist[i]);
	    }
	}
	if (love) {
	    if (null == mparam) {
		var sites = ['caMv','caGf','caUh','caAm','caWt','caWh','caTc'];
		for (var i = 0; i < sites.length; i++) {
		    toggleActivate(sites[i]);
		}
	    }
	    //document.querySelectorAll(".collapsed").forEach(m => m.className = "expanded");
	}

	document.querySelectorAll("#instructions input[type=checkbox]").forEach(cb => cb.addEventListener("click", function() {
	    event.stopPropagation();
	    let item = document.querySelector("#" + this.dataset.pair);
	    if (item) {
		if (this.checked) doActivate(item);
		else doDeactivate(item);
	    }
	    else {
		console.error("SHOW ME checkbox does not correspond to any known category");
	    }
	}));
    }
}