Greasy Fork is available in English.

WME Show Alt Names

Shows alt names for selected segments

Per 16-04-2015. Zie de nieuwste versie.

// ==UserScript==
// @name         	WME Show Alt Names
// @description		Shows alt names for selected segments
// @version      	0.06
// @author			SAR85
// @copyright		SAR85
// @license		 	CC BY-NC-ND
// @grant		 	none
// @include			https://www.waze.com/editor/*
// @include			https://www.waze.com/*/editor/*
// @include			https://editor-beta.waze.com/*
// @namespace		https://greasyfork.org/users/9321
// ==/UserScript==

//OL Popup Patch
/* OL License Info
Copyright 2005-2012 OpenLayers Contributors. All rights reserved. See
authors.txt for full list.

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation and/or
other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY OPENLAYERS CONTRIBUTORS ``AS IS'' AND ANY EXPRESS
OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
SHALL COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

The views and conclusions contained in the software and documentation are those
of the authors and should not be interpreted as representing official policies,
either expressed or implied, of OpenLayers Contributors.
 */
OpenLayers.Popup = OpenLayers.Class({
		events : null,
		id : "",
		lonlat : null,
		div : null,
		contentSize : null,
		size : null,
		contentHTML : null,
		backgroundColor : "",
		opacity : "",
		border : "",
		contentDiv : null,
		groupDiv : null,
		closeDiv : null,
		autoSize : false,
		minSize : null,
		maxSize : null,
		displayClass : "olPopup",
		contentDisplayClass : "olPopupContent",
		padding : 0,
		disableFirefoxOverflowHack : false,
		fixPadding : function () {
			if (typeof this.padding == "number") {
				this.padding = new OpenLayers.Bounds(this.padding, this.padding, this.padding, this.padding);
			}
		},
		panMapIfOutOfView : false,
		keepInMap : false,
		closeOnMove : false,
		map : null,
		initialize : function (id, lonlat, contentSize, contentHTML, closeBox, closeBoxCallback) {
			if (id == null) {
				id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");
			}
			this.id = id;
			this.lonlat = lonlat;
			this.contentSize = (contentSize != null) ? contentSize : new OpenLayers.Size(OpenLayers.Popup.WIDTH, OpenLayers.Popup.HEIGHT);
			if (contentHTML != null) {
				this.contentHTML = contentHTML;
			}
			this.backgroundColor = OpenLayers.Popup.COLOR;
			this.opacity = OpenLayers.Popup.OPACITY;
			this.border = OpenLayers.Popup.BORDER;
			this.div = OpenLayers.Util.createDiv(this.id, null, null, null, null, null, "hidden");
			this.div.className = this.displayClass;
			var groupDivId = this.id + "_GroupDiv";
			this.groupDiv = OpenLayers.Util.createDiv(groupDivId, null, null, null, "relative", null, "hidden");
			var id = this.div.id + "_contentDiv";
			this.contentDiv = OpenLayers.Util.createDiv(id, null, this.contentSize.clone(), null, "relative");
			this.contentDiv.className = this.contentDisplayClass;
			this.groupDiv.appendChild(this.contentDiv);
			this.div.appendChild(this.groupDiv);
			if (closeBox) {
				this.addCloseBox(closeBoxCallback);
			}
			this.registerEvents();
		},
		destroy : function () {
			this.id = null;
			this.lonlat = null;
			this.size = null;
			this.contentHTML = null;
			this.backgroundColor = null;
			this.opacity = null;
			this.border = null;
			if (this.closeOnMove && this.map) {
				this.map.events.unregister("movestart", this, this.hide);
			}
			this.events.destroy();
			this.events = null;
			if (this.closeDiv) {
				OpenLayers.Event.stopObservingElement(this.closeDiv);
				this.groupDiv.removeChild(this.closeDiv);
			}
			this.closeDiv = null;
			this.div.removeChild(this.groupDiv);
			this.groupDiv = null;
			if (this.map != null) {
				this.map.removePopup(this);
			}
			this.map = null;
			this.div = null;
			this.autoSize = null;
			this.minSize = null;
			this.maxSize = null;
			this.padding = null;
			this.panMapIfOutOfView = null;
		},
		draw : function (px) {
			if (px == null) {
				if ((this.lonlat != null) && (this.map != null)) {
					px = this.map.getLayerPxFromLonLat(this.lonlat);
				}
			}
			if (this.closeOnMove) {
				this.map.events.register("movestart", this, this.hide);
			}
			if (!this.disableFirefoxOverflowHack && OpenLayers.BROWSER_NAME == 'firefox') {
				this.map.events.register("movestart", this, function () {
					var style = document.defaultView.getComputedStyle(this.contentDiv, null);
					var currentOverflow = style.getPropertyValue("overflow");
					if (currentOverflow != "hidden") {
						this.contentDiv._oldOverflow = currentOverflow;
						this.contentDiv.style.overflow = "hidden";
					}
				});
				this.map.events.register("moveend", this, function () {
					var oldOverflow = this.contentDiv._oldOverflow;
					if (oldOverflow) {
						this.contentDiv.style.overflow = oldOverflow;
						this.contentDiv._oldOverflow = null;
					}
				});
			}
			this.moveTo(px);
			if (!this.autoSize && !this.size) {
				this.setSize(this.contentSize);
			}
			this.setBackgroundColor();
			this.setOpacity();
			this.setBorder();
			this.setContentHTML();
			if (this.panMapIfOutOfView) {
				this.panIntoView();
			}
			return this.div;
		},
		updatePosition : function () {
			if ((this.lonlat) && (this.map)) {
				var px = this.map.getLayerPxFromLonLat(this.lonlat);
				if (px) {
					this.moveTo(px);
				}
			}
		},
		moveTo : function (px) {
			if ((px != null) && (this.div != null)) {
				this.div.style.left = px.x + "px";
				this.div.style.top = px.y + "px";
			}
		},
		visible : function () {
			return OpenLayers.Element.visible(this.div);
		},
		toggle : function () {
			if (this.visible()) {
				this.hide();
			} else {
				this.show();
			}
		},
		show : function () {
			this.div.style.display = '';
			if (this.panMapIfOutOfView) {
				this.panIntoView();
			}
		},
		hide : function () {
			this.div.style.display = 'none';
		},
		setSize : function (contentSize) {
			this.size = contentSize.clone();
			var contentDivPadding = this.getContentDivPadding();
			var wPadding = contentDivPadding.left + contentDivPadding.right;
			var hPadding = contentDivPadding.top + contentDivPadding.bottom;
			this.fixPadding();
			wPadding += this.padding.left + this.padding.right;
			hPadding += this.padding.top + this.padding.bottom;
			if (this.closeDiv) {
				var closeDivWidth = parseInt(this.closeDiv.style.width);
				wPadding += closeDivWidth + contentDivPadding.right;
			}
			this.size.w += wPadding;
			this.size.h += hPadding;
			if (OpenLayers.BROWSER_NAME == "msie") {
				this.contentSize.w += contentDivPadding.left + contentDivPadding.right;
				this.contentSize.h += contentDivPadding.bottom + contentDivPadding.top;
			}
			if (this.div != null) {
				this.div.style.width = this.size.w + "px";
				this.div.style.height = this.size.h + "px";
			}
			if (this.contentDiv != null) {
				this.contentDiv.style.width = contentSize.w + "px";
				this.contentDiv.style.height = contentSize.h + "px";
			}
		},
		updateSize : function () {
			var preparedHTML = "<div class='" + this.contentDisplayClass + "'>" +
				this.contentDiv.innerHTML + "</div>";
			var containerElement = (this.map) ? this.map.div : document.body;
			var realSize = OpenLayers.Util.getRenderedDimensions(preparedHTML, null, {
					displayClass : this.displayClass,
					containerElement : containerElement
				});
			var safeSize = this.getSafeContentSize(realSize);
			var newSize = null;
			if (safeSize.equals(realSize)) {
				newSize = realSize;
			} else {
				var fixedSize = {
					w : (safeSize.w < realSize.w) ? safeSize.w : null,
					h : (safeSize.h < realSize.h) ? safeSize.h : null
				};
				if (fixedSize.w && fixedSize.h) {
					newSize = safeSize;
				} else {
					var clippedSize = OpenLayers.Util.getRenderedDimensions(preparedHTML, fixedSize, {
							displayClass : this.contentDisplayClass,
							containerElement : containerElement
						});
					var currentOverflow = OpenLayers.Element.getStyle(this.contentDiv, "overflow");
					if ((currentOverflow != "hidden") && (clippedSize.equals(safeSize))) {
						var scrollBar = OpenLayers.Util.getScrollbarWidth();
						if (fixedSize.w) {
							clippedSize.h += scrollBar;
						} else {
							clippedSize.w += scrollBar;
						}
					}
					newSize = this.getSafeContentSize(clippedSize);
				}
			}
			this.setSize(newSize);
		},
		setBackgroundColor : function (color) {
			if (color != undefined) {
				this.backgroundColor = color;
			}
			if (this.div != null) {
				this.div.style.backgroundColor = this.backgroundColor;
			}
		},
		setOpacity : function (opacity) {
			if (opacity != undefined) {
				this.opacity = opacity;
			}
			if (this.div != null) {
				this.div.style.opacity = this.opacity;
				this.div.style.filter = 'alpha(opacity=' + this.opacity * 100 + ')';
			}
		},
		setBorder : function (border) {
			if (border != undefined) {
				this.border = border;
			}
			if (this.div != null) {
				this.div.style.border = this.border;
			}
		},
		setContentHTML : function (contentHTML) {
			if (contentHTML != null) {
				this.contentHTML = contentHTML;
			}
			if ((this.contentDiv != null) && (this.contentHTML != null) && (this.contentHTML != this.contentDiv.innerHTML)) {
				this.contentDiv.innerHTML = this.contentHTML;
				if (this.autoSize) {
					this.registerImageListeners();
					this.updateSize();
				}
			}
		},
		registerImageListeners : function () {
			var onImgLoad = function () {
				if (this.popup.id === null) {
					return;
				}
				this.popup.updateSize();
				if (this.popup.visible() && this.popup.panMapIfOutOfView) {
					this.popup.panIntoView();
				}
				OpenLayers.Event.stopObserving(this.img, "load", this.img._onImageLoad);
			};
			var images = this.contentDiv.getElementsByTagName("img");
			for (var i = 0, len = images.length; i < len; i++) {
				var img = images[i];
				if (img.width == 0 || img.height == 0) {
					var context = {
						'popup' : this,
						'img' : img
					};
					img._onImgLoad = OpenLayers.Function.bind(onImgLoad, context);
					OpenLayers.Event.observe(img, 'load', img._onImgLoad);
				}
			}
		},
		getSafeContentSize : function (size) {
			var safeContentSize = size.clone();
			var contentDivPadding = this.getContentDivPadding();
			var wPadding = contentDivPadding.left + contentDivPadding.right;
			var hPadding = contentDivPadding.top + contentDivPadding.bottom;
			this.fixPadding();
			wPadding += this.padding.left + this.padding.right;
			hPadding += this.padding.top + this.padding.bottom;
			if (this.closeDiv) {
				var closeDivWidth = parseInt(this.closeDiv.style.width);
				wPadding += closeDivWidth + contentDivPadding.right;
			}
			if (this.minSize) {
				safeContentSize.w = Math.max(safeContentSize.w, (this.minSize.w - wPadding));
				safeContentSize.h = Math.max(safeContentSize.h, (this.minSize.h - hPadding));
			}
			if (this.maxSize) {
				safeContentSize.w = Math.min(safeContentSize.w, (this.maxSize.w - wPadding));
				safeContentSize.h = Math.min(safeContentSize.h, (this.maxSize.h - hPadding));
			}
			if (this.map && this.map.size) {
				var extraX = 0,
				extraY = 0;
				if (this.keepInMap && !this.panMapIfOutOfView) {
					var px = this.map.getPixelFromLonLat(this.lonlat);
					switch (this.relativePosition) {
					case "tr":
						extraX = px.x;
						extraY = this.map.size.h - px.y;
						break;
					case "tl":
						extraX = this.map.size.w - px.x;
						extraY = this.map.size.h - px.y;
						break;
					case "bl":
						extraX = this.map.size.w - px.x;
						extraY = px.y;
						break;
					case "br":
						extraX = px.x;
						extraY = px.y;
						break;
					default:
						extraX = px.x;
						extraY = this.map.size.h - px.y;
						break;
					}
				}
				var maxY = this.map.size.h -
					this.map.paddingForPopups.top -
					this.map.paddingForPopups.bottom -
					hPadding - extraY;
				var maxX = this.map.size.w -
					this.map.paddingForPopups.left -
					this.map.paddingForPopups.right -
					wPadding - extraX;
				safeContentSize.w = Math.min(safeContentSize.w, maxX);
				safeContentSize.h = Math.min(safeContentSize.h, maxY);
			}
			return safeContentSize;
		},
		getContentDivPadding : function () {
			var contentDivPadding = this._contentDivPadding;
			if (!contentDivPadding) {
				if (this.div.parentNode == null) {
					this.div.style.display = "none";
					document.body.appendChild(this.div);
				}
				contentDivPadding = new OpenLayers.Bounds(OpenLayers.Element.getStyle(this.contentDiv, "padding-left"), OpenLayers.Element.getStyle(this.contentDiv, "padding-bottom"), OpenLayers.Element.getStyle(this.contentDiv, "padding-right"), OpenLayers.Element.getStyle(this.contentDiv, "padding-top"));
				this._contentDivPadding = contentDivPadding;
				if (this.div.parentNode == document.body) {
					document.body.removeChild(this.div);
					this.div.style.display = "";
				}
			}
			return contentDivPadding;
		},
		addCloseBox : function (callback) {
			this.closeDiv = OpenLayers.Util.createDiv(this.id + "_close", null, {
					w : 17,
					h : 17
				});
			this.closeDiv.className = "olPopupCloseBox";
			var contentDivPadding = this.getContentDivPadding();
			this.closeDiv.style.right = contentDivPadding.right + "px";
			this.closeDiv.style.top = contentDivPadding.top + "px";
			this.groupDiv.appendChild(this.closeDiv);
			var closePopup = callback || function (e) {
				this.hide();
				OpenLayers.Event.stop(e);
			};
			OpenLayers.Event.observe(this.closeDiv, "touchend", OpenLayers.Function.bindAsEventListener(closePopup, this));
			OpenLayers.Event.observe(this.closeDiv, "click", OpenLayers.Function.bindAsEventListener(closePopup, this));
		},
		panIntoView : function () {
			var mapSize = this.map.getSize();
			var origTL = this.map.getViewPortPxFromLayerPx(new OpenLayers.Pixel(parseInt(this.div.style.left), parseInt(this.div.style.top)));
			var newTL = origTL.clone();
			if (origTL.x < this.map.paddingForPopups.left) {
				newTL.x = this.map.paddingForPopups.left;
			} else
				if ((origTL.x + this.size.w) > (mapSize.w - this.map.paddingForPopups.right)) {
					newTL.x = mapSize.w - this.map.paddingForPopups.right - this.size.w;
				}
			if (origTL.y < this.map.paddingForPopups.top) {
				newTL.y = this.map.paddingForPopups.top;
			} else
				if ((origTL.y + this.size.h) > (mapSize.h - this.map.paddingForPopups.bottom)) {
					newTL.y = mapSize.h - this.map.paddingForPopups.bottom - this.size.h;
				}
			var dx = origTL.x - newTL.x;
			var dy = origTL.y - newTL.y;
			this.map.pan(dx, dy);
		},
		registerEvents : function () {
			this.events = new OpenLayers.Events(this, this.div, null, true);
			function onTouchstart(evt) {
				OpenLayers.Event.stop(evt, true);
			}
			this.events.on({
				"mousedown" : this.onmousedown,
				"mousemove" : this.onmousemove,
				"mouseup" : this.onmouseup,
				"click" : this.onclick,
				"mouseout" : this.onmouseout,
				"dblclick" : this.ondblclick,
				"touchstart" : onTouchstart,
				scope : this
			});
		},
		onmousedown : function (evt) {
			this.mousedown = true;
			OpenLayers.Event.stop(evt, true);
		},
		onmousemove : function (evt) {
			if (this.mousedown) {
				OpenLayers.Event.stop(evt, true);
			}
		},
		onmouseup : function (evt) {
			if (this.mousedown) {
				this.mousedown = false;
				OpenLayers.Event.stop(evt, true);
			}
		},
		onclick : function (evt) {
			OpenLayers.Event.stop(evt, true);
		},
		onmouseout : function (evt) {
			this.mousedown = false;
		},
		ondblclick : function (evt) {
			OpenLayers.Event.stop(evt, true);
		},
		CLASS_NAME : "OpenLayers.Popup"
	});
OpenLayers.Popup.WIDTH = 200;
OpenLayers.Popup.HEIGHT = 200;
OpenLayers.Popup.COLOR = "white";
OpenLayers.Popup.OPACITY = 1;
OpenLayers.Popup.BORDER = "0px";
//End OL Popup Patch

var altPopups = [], altLayer, $altDiv;

function isLonLatInMapExtent(lonlat) {
	'use strict';
	return lonlat && W.map.getExtent().containsLonLat(lonlat);
}

function Popup(id, html, anchorObj) {
	this.id = id;
	this.html = html;
	this.anchorObj = anchorObj;
	this.lonlat = this.anchorObj.geometry.getBounds().getCenterLonLat();
	this.initialLonLat = this.lonlat.clone();
	this.popup = new OL.Popup(this.id, this.lonlat, new OL.Size(100, 100), this.html, true);
	this.$masterDiv = $(this.popup.div);
	this.$groupDiv = $(this.popup.groupDiv);
	this.$contentDiv = $(this.popup.contentDiv);
	this.$closeDiv = $(this.popup.closeDiv),

	//Set popup options
	this.popup.relativePosition = 'br';
	//this.popup.panMapIfOutOfView = true;
	this.popup.autoSize = true;

	//Style the close div
	this.$closeDiv.css('text-align', 'center');
	this.$closeDiv.html('X');

	//Add popup to map
	this.calculatePosition();
	this.add();

	//Remove z-index from main div (allows stylesheet to set it)
	//Done after add() because the map.addPopup sets z-index
	this.$masterDiv.css({
		'z-index' : '',
		'background-color' : '',
		'color' : ''
	});

	//push to array of popups
	altPopups.push(this);
}
Popup.prototype = {
	add : function () {
		W.map.addPopup(this.popup);
	},
	calculatePosition : function () {
		var i,
		n;
		var bounds = this.anchorObj.geometry.getBounds();
		if (!isLonLatInMapExtent(this.initialLonLat)) {
			for (i = 0, n = this.anchorObj.geometry.components.length; i < n; i++) {
				component = this.anchorObj.geometry.components[i];
				if (isLonLatInMapExtent(component.toLonLat())) {
					this.popup.lonlat = component.toLonLat().clone();
					break;
				}
			}
		} else {
			this.popup.lonlat = this.initialLonLat.clone();
		}
		//prevent overlapping with segment
		if (bounds.getWidth() > bounds.getHeight()) {
			this.popup.lonlat.lat -= 10;
		} else {
			this.popup.lonlat.lon += 10;
		}
		this.popup.updatePosition();
	},
	hide : function () {
		this.popup.hide();
	},
	show : function () {
		this.calculatePosition();
		this.popup.show();
	},
};

function getSelectedSegmentInfo() {
	'use strict';
	var i,
	n,
	j,
	t,
	item,
	primaryName,
	primaryCity,
	altName,
	altCity,
	segmentInfo,
	feature,
	selectedSegments = [],
	maxAltNames = 0;

	if (!W.selectionManager.hasSelectedItems()) {
		return;
	}
	for (i = 0, n = W.selectionManager.selectedItems.length; i < n; i++) {
		feature = W.selectionManager.selectedItems[i];
		item = feature.model;
		if (item.type === 'segment') {
			primaryName = W.model.streets.get(item.attributes.primaryStreetID);
			primaryCity = W.model.cities.get(primaryName.cityID);
			segmentInfo = {
				segment : item,
				feature : feature,
				primary : {
					name : primaryName.name || 'No name',
					city : primaryCity.name || 'No city',
				}
			};
			for (j = 0, t = item.attributes.streetIDs.length; j < t; j++) {
				altName = W.model.streets.get(item.attributes.streetIDs[j]);
				altCity = W.model.cities.get(altName.cityID);
				segmentInfo['alt' + j] = {
					name : altName.name || 'No name',
					city : altCity.name || 'No city',
				};
			}
			if (t > maxAltNames) {
				maxAltNames = t;
			}
			selectedSegments.push(segmentInfo);
		}
	}
	selectedSegments.maxAltNames = maxAltNames;
	return selectedSegments;
}

function randomRgbaColor(opacity) {
	opacity = opacity || 0.8;
	function random255() {
		return Math.floor(Math.random()*255);
	}
	return 'rgba(' + random255() + ',' + random255() + ',' + random255() + ',' + opacity;
}

function colorTable() {
	'use strict';
    var i,
	n,
	nameArray = [],
    $table = $('#altTable');
	
    $table.find('.altTable-primary, .altTable-alt').each(function(index1) {
		var $this = $(this),
			text = $this.text(),
			match = false,
			color;
		
		for (i = 0, n = nameArray.length; i < n; i++) {
			if (nameArray[i].name === text) {
				$this.css('background-color', nameArray[i].color);
				match = true;
				break;
			}
		}
		if (match === false) {
			color = randomRgbaColor();
			$this.css('background-color', color);
			nameArray.push({name: text, color: color});
		}
		match = false;
	});
}

function createTable(segments) {
	'use strict';
	var i,
	n,
	p,
	j,
	t,
	rowLength,
	$table,
	$header,
	$row,
	$cell;
	
	if (!segments) {
		return;
	}
	
	//create table
	$table = $('<table/>');
	$table.attr('id', 'altTable');
	$table.addClass('altTable');

	//create header
	$header = $('<tr/>').attr('id', 'altTable-header');
	$header.append($('<th/>').text('Segment ID'));
	$header.append($('<th/>').text('Primary'));
	for (i = 0, n = segments.maxAltNames; i < n; i++) {
		$header.append($('<th/>').text('Alt ' + (i + 1)));
	}
	$table.append($header);

	//create rows for each segment
	for (i = 0, n = segments.length; i < n; i++) {
		//add id to row
		$row = $('<tr/>');
		$cell = $('<td/>').addClass('altTable-id').text(segments[i].segment.attributes.id);
		$row.append($cell);
		
		//add primary name and city to row
		$cell = $('<td/>').addClass('altTable-primary');
		$cell.append($('<div/>').addClass('altTable-primary-name').text(segments[i].primary.name));
		$cell.append($('<div/>').addClass('altTable-primary-city').text(segments[i].primary.city));
		$row.append($cell);
		
		//add alt names and cities to row
		for (p in segments[i]) {
			if (!/alt\d+/.test(p)) {
				continue;
			}
			$cell = $('<td/>').addClass('altTable-alt altTable-' + p)
			$cell.append($('<div/>').addClass('altTable-' + p + '-name').text(segments[i][p].name));
			$cell.append($('<div/>').addClass('altTable-' + p + '-city').text(segments[i][p].city));
			$row.append($cell);
		}
		
		//add additional cells to row to match maxAltNames
		rowLength = $row.find('td').length;
		if (rowLength < segments.maxAltNames + 2) {
			for (j = 0, t = segments.maxAltNames - rowLength + 2; j < t; j++) {
				$row.append($('<td/>').addClass('altTable-placeholder'));
			}
		}
		$table.append($row);
	}
	$table.find('tr, th, td').addClass('altTable');
	return $altDiv.append($table), colorTable();
}

function drawAltNames(segments) {
	'use strict';
	var i,
	n,
	p,
	html,
	popup;
	if (!segments) {
		return;
	}
	for (i = 0, n = segments.length; i < n; i++) {
		html = '<div style="font-size:0.5em"><p><strong>Segment ID: </strong>' +
			segments[i].segment.attributes.id + '</p>';
		html += '<table class="popupTable"><thead><tr><th></th><th>Name</th><th>City</th></tr></thead><tbody>';
		html += '<tr><td><strong>Primary</strong></td>' +
		'<td>' + segments[i].primary.name + '</td>' +
		'<td>' + segments[i].primary.city + '</td></tr>';
		for (p in segments[i]) {
			if (!segments[i].hasOwnProperty(p) || p === 'primary' || p === 'segment'
				 || p === 'feature') {
				continue;
			}
			html += '<tr><td><strong>' + p + '</strong></td>' +
			'<td>' + segments[i][p].name + '</td>' +
			'<td>' + segments[i][p].city + '</td></tr>';
		}
		html += '</tbody></table></div>';
		console.log(html);

		popup = new Popup(
				segments[i].segment.attributes.id,
				html,
				segments[i].segment);
		segments[i].feature.popup = popup;
	}
}

function preventCollision() {
	var i,
	j,
	l;
	if (altPopups.length < 1) {
		return;
	}
	altPopups.sort(function (a, b) {
		console.log(a.$masterDiv.position().left, b.$masterDiv.position().left);
		return a.$masterDiv.position().left - b.$masterDiv.position().left;
	})
	for (j = 0, n = altPopups.length; j < n; j++) {
		var $div1 = altPopups[j].$masterDiv;
		var x1 = $div1.position().left;
		var y1 = $div1.position().top;
		var h1 = $div1.outerHeight(true);
		var w1 = $div1.outerWidth(true);
		var b1 = y1 + h1;
		var r1 = x1 + w1;
		for (i = j + 1; i < n; i++) {
			$div2 = altPopups[i].$masterDiv;
			if (!$div2.is(':visible')) {
				continue;
			}
			var x2 = $div2.position().left;
			var y2 = $div2.position().top;
			var h2 = $div2.outerHeight(true);
			var w2 = $div2.outerWidth(true);
			var b2 = y2 + h2;
			var r2 = x2 + w2;
			if (!(b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2)) {
				//$div2.css('top', b1 + 5);
				pixel = new OL.Pixel(x2, b1 + 5);
				altPopups[i].popup.moveTo(pixel);
			}
		}
	}
}

function checkSelection() {
	var i,
	n,
	segments;
	if (W.selectionManager.hasSelectedItems() && W.map.zoom >= 3 && altLayer.getVisibility()) {
		segments = getSelectedSegmentInfo();
		if (segments.length > 0) {
			$altDiv.html('');
			createTable(segments);
			$altDiv.fadeIn();
		}
	} else {
		for (i = 0, n = W.map.popups.length; i < n; i++) {
			W.map.popups[i].hide();
		}
		$altDiv.fadeOut();
	}
}

function updateAlert() {
	var altVersion = "0.06",
	alertOnUpdate = true,
	versionChanges = 'WME Show Alt Names has been updated to ' + altVersion + '.\n';
	versionChanges += 'Changes:\n';
	versionChanges += '[*]Fixed segment name matching and coloring in main table.\n';
	versionChanges += '[*]Table now shows at zoom 3 and closer.\n';
	versionChanges += '[*]Individual segment popups no longer shown upon segment selection.\n';
	versionChanges += '[*]All selected segments are now analyzed, not just those with alt names.\n';
	versionChanges += '[*]Various style changes.\n';
	if (alertOnUpdate && window.localStorage && window.localStorage.altVersion !== altVersion) {
		window.localStorage.altVersion = altVersion;
		alert(versionChanges);
	}
}

function init() {
	var olPopupCss = '.olPopup {border-radius: 5px; z-index: 1000; background-color: rgba(0,0,0,0.8); ';
	olPopupCss += 'color: white}\n';
	olPopupCss += 'table.popupTable {border: 1px solid white}\n';
	olPopupCss += 'table.popupTable tr {border: 1px solid white; padding: 3px}\n';
	olPopupCss += 'table.popupTable td {border: 1px solid white; padding: 3px}\n';
	olPopupCss += 'table.popupTable th {border: 1px solid white; padding: 3px}\n';
	var altTableCss = '.altTable {border: 1px solid white; padding: 3px; border-collapse: collapse}\n';
	var altDivCss = '#altDiv {display: none; position: absolute; left: 6px; bottom: 60px; height: auto; width: auto; ';
	altDivCss += 'overflow: auto; background-color: rgba(0,0,0,0.8); color: white; padding: 5px; '; 
	altDivCss += 'z-index: 1001; border-radius: 5px; max-height: 550px;}';
	
	//add css to page
	$('<style/>').html(olPopupCss + altTableCss + altDivCss).appendTo($(document.head));
	
	updateAlert();
	
	//add div for main table
	$altDiv = $('<div/>').attr('id', 'altDiv');
	$altDiv.appendTo($('#WazeMap'));
	
	//create map layer
	altLayer = new OL.Layer.Markers('WME Show Alt Names');
	
	//register event listeners
	W.loginManager.events.register('afterloginchanged', null, init);
	W.selectionManager.events.register('selectionchanged', null, checkSelection);
	altLayer.events.register("visibilitychanged", null, checkSelection);
	
	//add layer to map
	W.map.addLayer(altLayer);
}

function bootstrap() {
	var bGreasemonkeyServiceDefined = false;
	try {
		if ("object" === typeof Components.interfaces.gmIGreasemonkeyService) {
			bGreasemonkeyServiceDefined = true;
		}
	} catch (err) {
		/* Ignore. */
	}
	if (undefined === typeof unsafeWindow || !bGreasemonkeyServiceDefined) {
		unsafeWindow = (function () {
			var dummyElem = document.createElement('p');
			dummyElem.setAttribute('onclick', 'return window;');
			return dummyElem.onclick();
		})();
	}
	/* begin running the code! */
	if (undefined !== typeof W.loginManager.events.register) {
		window.setTimeout(init, 100);
	} else {
		window.setTimeout(function () {
			bootstrap();
		}, 1000);
	}
}

window.setTimeout(bootstrap, 100);