map.js

(function(window) {
	"use strict";

	var
		UNLTourMap = {},
		markerData = {},
		buildingAliases = {},
		isReady = false,
		busesOnByDefault = true,
		initMarkers = [],
		initBuilding,

		minText = 'Min -',
		maxText = 'Max +',
		minTitle = 'Return to normal size',
		maxTitle = 'Maximize map in window',

		desktopBp = 'only screen and (min-width: 700px)',

		getMarkersJSONURL = function(markerType, campus) {
			var url = UNL_TOUR_URL + '?view=';

			switch (markerType) {
				case 'bldgnoimage':
					url += 'filter&feature=buildings&filter=hasnoimages&name=' + markerType;
					break;
				case 'buildings':
					if (campus) {
						markerType = campus + 'buildingmarkers';
					}
					// no break
				default:
					url += markerType;
					break;
			}

			return url + '&format=json';
		};

	UNLTourMap.initialize = function(markerTypes) {
		isReady = true;
		if (markerTypes) {
			initMarkers = markerTypes;
		}
	};

	require(['jquery', 'modernizr'], function($, Modernizr) {
		var
			$progress, $selectMarkers, $canvas, $infoPlaceholder,
			initCode = '',

			markers = {},
			infoCache = {},

			infoBox,

			isDesktop = function() {
				return Modernizr.mq(desktopBp);
			},

			pushState = function(code) {
				code = code || '';
				if (!$canvas.is(':visible')) {
					$('#touch_control a').click();
				}

				if (window.history.pushState) {
					if ((window.history.state && window.history.state.code === code) ||
						(!window.history.state && code === initCode)
					) {
						return;
					}

					window.history.pushState({code: code}, '', UNL_TOUR_URL + code);
					loadState(code);
				} else {
					if (!code) {
						code = '/';
					}
					window.location.hash = code;
				}
			},

			loadState = function(code) {
				if (code) {
					UNLTourMap.openBuildingInfo(code);
				} else {
					infoBox.close();
				}
			},

			initialize = function(markerTypes) {
				var
					mapOptions = {
						zoom : UNLTourMap.defaultZoom,
						maxZoom : UNLTourMap.mapMaxZoom,
						minZoom : UNLTourMap.mapMinZoom,
						center : new google.maps.LatLng(UNLTourMap.centerLat,UNLTourMap.centerLng),
						mapTypeControl : true,
						mapTypeId : google.maps.MapTypeId.ROADMAP,
						mapTypeControlOptions : {
							mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID],
							style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
						},
						zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.TOP_LEFT },
						panControl : false,
						scrollwheel : false,
						styles: UNLTourMap.styles
					},

					i = 0,

					$legend = $('#mapLegend'),

					$toggle,
					fullScreen = false,
					toggleUI = function(init) {
						var $touchProgress = $('#touch_control progress');

						if (fullScreen) {
							UNLTourMap.map.setOptions({ scrollwheel: true });
							$("html").addClass('fullscreen');
						} else {
							UNLTourMap.map.setOptions({ scrollwheel: false });
							$("html").removeClass('fullscreen');
						}

						$toggle.text(fullScreen ? minText : maxText);
						$toggle.attr('title', fullScreen ? minTitle : maxTitle);

						if (!init && Modernizr.touch && $touchProgress.length) {
							$('<a>', {'class': 'wdn-button', href: '#'})
								.text('Restore Map')
								.insertBefore($touchProgress)
								.click(toggleEvent);

							$touchProgress.remove();
						}
					},
					toggleEvent = function(e) {
						var currentCenter = UNLTourMap.map.getCenter();
						e.preventDefault();
						fullScreen = !fullScreen;
						toggleUI();
						google.maps.event.trigger(UNLTourMap.map, 'resize');
						UNLTourMap.map.setCenter(currentCenter);
					},

					$busCtl,
					busTimeout,
					busLoop;

				// customize the interface for small devices
				if (!isDesktop()) {
					fullScreen = true;
					mapOptions.mapTypeControl = false;
				}

				// customize interface for touch devices (conflicts with scroll)
				if (Modernizr.touch) {
					fullScreen = true;
				}

				// create the map instance on the canvas
				$canvas = $('#map_canvas');
				UNLTourMap.map = new google.maps.Map($canvas[0], mapOptions);

				// create a progres element to show AJAX processing
				$progress = $('<progress>', {id: 'mapProgress'}).text('Loading...');
				UNLTourMap.map.controls[google.maps.ControlPosition.TOP_LEFT].push($progress[0]);

				$infoPlaceholder = $('<div>').hide().appendTo($('body'));

				// create an anchor for toggling fullscreen map
				$toggle = $('<a>', {'class': 'google-ctl', href: '#'});
				$toggle.click(toggleEvent);
				toggleUI(true);
				UNLTourMap.map.controls[google.maps.ControlPosition.LEFT].push($toggle[0]);

				// if the map search exists, initialize the autocomplete widget
				if ($legend.length) {
					$('form', $legend).submit(function() {
						return false;
					});
					require(['plugins/ui/jquery-ui'], function() {
						var $input = $('#txt1', $legend);

						$.widget('ui.autocomplete', $.ui.autocomplete, {
							_renderItem: function(ul, item) {
								return $('<li>')
								.data( "item.autocomplete", item )
								.append(
									$('<a>')
									.append( $('<span>', {'class': 'buildingCode'}).text(item.value) )
									.append( $('<span>', {'class': 'format'}).text(item.label) )
									.append( $('<span>', {'class': 'campus'}).text('(' + item.campus + ')') )
								)
								.appendTo(ul);
							},
							_resizeMenu: function() {
								this.menu.element.outerWidth(this.element.outerWidth());
							}
						});

						$input.autocomplete({
							delay: 555,
							minLength: 0,
							appendTo: '.map-band',
							source: function(request, response) {
								$.ajax({
									url: UNL_TOUR_URL+'?view=search&q='+encodeURIComponent(request.term)+'&format=json',
									dataType: "json",
									success: function(data) {
										var rows = [], printCampus = '';
										for (var code in data['buildings']) {
											switch (data['buildings'][code].campus) {
												case 'city':
												case 'east':
												case 'innovation':
													printCampus = data['buildings'][code].campus + ' Campus';
													break;
												default:
													printCampus = 'Sites in Lincoln';
											}
											rows.push({
													label : data['buildings'][code].name,
													value : code,
													campus : printCampus
											});
										}
										response(rows);
									}
								});
							},
							search: function() {
								$progress.show();
							},
							open : function() {
								$progress.hide();
							},
							close : function() {
								$(this).blur();
							},
							select: function(e, ui) {
								pushState(ui.item.value);
							}
						});

						$('#listAll', $legend).click(function() {
							var $widget = $input.autocomplete('widget');
							if ($widget.is(':visible')) {
								$input.autocomplete('close');
							} else {
								$input.autocomplete('search', '');
							}
						});

						$canvas.click(function(e) {
							if ($legend.find(e.target).length) {
								return;
							}

							var $widget = $input.autocomplete('widget');
							if ($widget.is(':visible')) {
								$input.autocomplete('close');
							}
						});
					});
					$legend.addClass('ready').remove();
					UNLTourMap.map.controls[google.maps.ControlPosition.TOP_LEFT].push($legend[0]);
				}

				// if the selectMarkers exists, add it to the google map controls
				$selectMarkers = $('#selectMarkers');
				if ($selectMarkers.length) {
					$selectMarkers.addClass('ready').remove();
					UNLTourMap.map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push($selectMarkers[0]);

					$selectMarkers.on('click', 'li', function(e){
						var type = this.id || '';
						type = type.replace('check_', '');
						e.preventDefault();

						if (!type) {
							return;
						}

						toggleMarkers(type, !$(this).hasClass('on'));
						$(this).toggleClass('on');
					});
				}

				// create an InfoWindow to show building info
				infoBox = new google.maps.InfoWindow();
				google.maps.event.addListener(infoBox, 'closeclick', function() {
					pushState();
				});

				// initalize buses
				markers['buses'] = {};
				busLoop = function() {
					busTimeout = true;
					$.ajax({
						url: UNL_TOUR_URL + 'busproxy.php',
						dataType: 'json',
						success: function(data) {
							$.each(data.VehicleArray, function(key, value) {
								if (!value.vehicle || value.vehicle.id == -1) {
									return;
								}

								// check for markers that should be removed
								if (value.vehicle.oos || (value.vehicle.routeID != 24 && value.vehicle.routeID != 25)) {
									if (markers['buses'][value.vehicle.id]) {
										markers['buses'][value.vehicle.id].setMap(null);
										delete markers['buses'][value.vehicle.id];
									}

									return;
								}

								if (markers['buses'][value.vehicle.id]) {
									markers['buses'][value.vehicle.id].setPosition(new google.maps.LatLng(value.vehicle.CVLocation.latitude/100000, value.vehicle.CVLocation.longitude/100000));
								} else {
									markers['buses'][value.vehicle.id] = new google.maps.Marker({
										position : new google.maps.LatLng(value.vehicle.CVLocation.latitude/100000, value.vehicle.CVLocation.longitude/100000),
										map      : UNLTourMap.map,
										title    : 'Route ' + value.vehicle.routeID,
										icon     : UNL_TOUR_URL + 'images/markers/google/busstop.png',
										clickable: false,
									});
								}
							});
						},
						complete: function() {
							if (busTimeout) {
								busTimeout = setTimeout(busLoop, 500);
							}
						}
					});
				};
				$busCtl = $('<li>', {id: 'check_buses'}).append($('<a>', {'class': 'icon-bus', href: '#'}).text('Buses'));
				$busCtl.click(function(e) {
					e.preventDefault();
					if ($(this).hasClass('on')) {
						clearTimeout(busTimeout);
						busTimeout = false;
					} else {
						busLoop();
					}
				});
				$selectMarkers.append($busCtl);

				// turn buses on by default
				if (busesOnByDefault) {
					$busCtl.click();
				}

				// Set up state change monitoring
				$(window).on('hashchange', function() {
					var code = window.location.hash.replace('#', '');
					if (code == '/') {
						code = '';
					}

					loadState(code);
				});
				if (window.location.hash) {
					initCode = window.location.hash.replace('#', '');
					$(window).trigger('hashchange');
		        }
				$(window).on('popstate', function(e) {
					var code = initCode, oEvent = e.originalEvent;

					if (oEvent.state) {
						code = oEvent.state.code || '';
					}

					loadState(code);
				});

				$canvas.on('click', '.markerImages img', function() {
					var clickedImage = $(this).attr('src'),
						lgImage = clickedImage.substring(0, clickedImage.length-2) + 'lg';

					$(this).closest('.content').children().hide();
					$('#fullImage').empty().append($('<img>', { src: lgImage })).show();
					return false;
				});

				$canvas.on('click', '#fullImage', function() {
					$(this).closest('.content').children().show();
					$(this).hide();
					return false;
				});

				// load initial markers
				if (markerTypes) {
					initMarkers = markerTypes;
				}
				for (; i < initMarkers.length; i++) {
					setUpMarkers(initMarkers[i]);
				}

				UNLTourMap.initialize = initialize = function(){};
			},

			addPoint = function(loc, markerType, display) {
				if (typeof(markers[markerType]) == 'undefined') {
					markers[markerType] = {};
				}
				if (typeof(infoCache[markerType]) == 'undefined') {
					infoCache[markerType] = {};
				}

				var
					markerIcon = markerType.substr(0, markerType.length - 1),
					marker = new google.maps.Marker({
						position : new google.maps.LatLng(loc.position.point.latitude, loc.position.point.longitude),
						map      : UNLTourMap.map,
						title    : loc.name,
						icon     : UNL_TOUR_URL + 'images/markers/google/' + markerIcon + '.png',
						visible  : display,
						animation: google.maps.Animation.DROP
					}),

					showBox = function() {
						$infoPlaceholder.html(infoCache[markerType][loc.code]);
						infoBox.setContent($infoPlaceholder.children()[0]);
						infoBox.open(UNLTourMap.map, marker);
					};

				marker.showinfo = function() {
					if (typeof(infoCache[markerType][loc.code]) == 'undefined') {
						$progress.show();
						$.get(UNL_TOUR_URL + markerIcon + '/' + loc.code + '/info', {format: 'partial'}, function(data) {
							$progress.hide();
							infoCache[markerType][loc.code] = data;
							showBox();
						});
					} else {
						showBox();
					}
				};

				google.maps.event.addListener(marker, "click", function() {
					if (markerType == 'buildings') {
						pushState(loc.code);
					} else {
						pushState();
						marker.showinfo();
					}
				});

				if (markerType == 'buildings') {
					$(document).on('click', 'a[href$="/'+loc.code+'"]', function(e) {
						e.preventDefault();
						$('html,body').animate({scrollTop:0}, 400);
						pushState(loc.code);
					});
				}

				markers[markerType][loc.code] = marker;
			},

			loadMarkers = function(markerType, display, callback) {
				for (var code in markerData[markerType]) {
					addPoint(markerData[markerType][code], markerType, display);
				}

				if (callback) {
					callback();
				}
			},

			setUpMarkers = function(markerType, campus, display, callback) {
				if (typeof(display) == 'undefined') {
					display = true;
				}

				if (typeof(markerData[markerType]) == 'undefined') {
					$progress.show();
					$.getJSON(getMarkersJSONURL(markerType, campus), function (data) {
						UNLTourMap.setMarkerData(data[markerType], markerType);
						loadMarkers(markerType, display, callback);
						$progress.hide();
					});
				} else {
					loadMarkers(markerType, display, callback);
				}
			},

			toggleMarkers = function(markerType, display) {
				var i;

				if (typeof(markers[markerType]) == 'undefined') {
					setUpMarkers(markerType, null, display);
				} else {
					for (i in markers[markerType]) {
						markers[markerType][i].setVisible(display);
					}
				}
			},

			openBuildingInfo = function(code, isFirst) {
				var callback = function() {
					if (markers['buildings'][code]) {
						markers['buildings'][code].setVisible(true);
						markers['buildings'][code].showinfo();
					}
				};

				if (isFirst) {
					initCode = code;
				}

				if (buildingAliases[code]) {
					code = buildingAliases[code];
				}

				if (typeof(markers['buildings']) == 'undefined') {
					setUpMarkers('buildings', null, true, callback);
				} else {
					callback();
				}
			};

		if (isReady) {
			initialize();
		} else {
			UNLTourMap.initialize = initialize;
		}

		UNLTourMap.openBuildingInfo = openBuildingInfo;
		if (initBuilding) {
			openBuildingInfo(initBuilding, true);
		}
	});

	UNLTourMap.panTo = function(lat, lng) {
		UNLTourMap.map.panTo(new google.maps.LatLng(lat, lng));
	};

	UNLTourMap.setBuildingAliases = function(data) {
		buildingAliases = data;
	};

	UNLTourMap.setMarkerData = function(data, type) {
		if (type) {
			markerData[type] = data;
		} else {
			markerData = data;
		}
	};

	UNLTourMap.openBuildingInfo = function(code) {
		initBuilding = code;
	};

	window['UNLTourMap'] = UNLTourMap;
}(window));