');
fillMap(currentlyShowing);
});
// Change the display to show price information.
$('#pricebutton').click(function(){
if(currentlyShowing == 'price'){
return;
}
currentlyShowing = 'price';
clearOverlays({});
$('#availbutton').removeClass('selected');
$('#pricebutton').addClass('selected');
$('#legend').html('
');
clearOverlays({});
fillMap(currentlyShowing);
});
// Watch and change the area displayed based on the choice from the select box.
$('select#neighborhood').change(pilotAreaJumper);
pilotAreaJumper();
// This handles the click on results. Highlight clicked item, and pan the map over to the marker they selected.
$('.results').live('click', function() {
var pointIndex = $(this).attr('index');
var location = getSpotLocation(markersArray[pointIndex]['marker']);
// Looking at a highlighting option...
if(circlemarker){
circlemarker.setMap(null);
}
map.panTo(location);
if(map.getZoom() < zoomLevel){
map.setZoom(zoomLevel);
}
var idToScroll = '#i-' + pointIndex;
//c(z[pointIndex]);
$('#f div').removeClass('activeDetails');
$(idToScroll).addClass('activeDetails');
$('#f').scrollTo(idToScroll,{duration:750,easing:'swing'});
//c($('#f' + idToScroll).text());
circlemarker = new google.maps.Circle({
center: location,
map:map,
radius:5,
strokeColor:'#008CDF',
strokeOpacity:0.6,
strokeWeight:1,
fillColor:'#008CDF',
fillOpacity:0.2
});
});
google.maps.event.addListener(map, 'zoom_changed', function() {
// Make sure the garage's markers are properly sized.
clearOverlays({eraseCircle:true});
fillMap(currentlyShowing);
});
});
// Scroll the map to the selected pilot area
function pilotAreaJumper() {
var jumpLocation = $('#neighborhood').val();
map.panTo(citySections[jumpLocation]['position']);
map.setZoom(citySections[jumpLocation]['zoom']);
if(jumpLocation == 'city'){
$('#f').scrollTo(0,{duration:750,easing:'swing'});//scrollTo top here. The top of the div should have the intro/howto language.
}
}
// Populate structures with returned parking information.
function prepareData(data,status){
//var status = data['STATUS'];
var numberOfItems = data['NUM_RECORDS'];
var availlist = data['AVL'];
var locations = [];
var nw = [];
var se = [];
var details;
var dataArea = [];
dataTimeStamp = data['AVAILABILITY_UPDATED_TIMESTAMP'];
$('#f').empty();
var listLen = data['AVL'].length;
var item = 0;
for(; item < listLen; item++){
locations = data['AVL'][item]['LOC'].split(',');
if(data['AVL'][item]['TYPE'] == 'ON'){
nw = [locations[1],locations[0]];
se = [locations[3],locations[2]];
}else{
nw = [locations[1],locations[0]]; // Garages return only one point, the main entrance.
se = nw;
}
dataArea.push(new google.maps.LatLng(nw[0],nw[1]));
dataArea.push(new google.maps.LatLng(se[0],se[1]));
var used = parseInt(data['AVL'][item]['OCC']);
var capacity = parseInt(data['AVL'][item]['OPER']);
var avail = capacity - used;
if(capacity == 0 || isNaN(capacity)){
availpercent = 0;
}else{
availpercent = Math.round(((avail/capacity) * 100) * 10)/10;
}
usedpercent = 100 - availpercent;
if(avail < 2 && avail > 0 && !isNaN(avail) && availpercent != 0 && capacity <= 3){
if(availpercent <= 15){
usedpercent = -57; // less than 15 percent available. hack
} else{
usedpercent = -58; // more than 15 percent available. hack
}
} else if(capacity == 0 && used == 0 && data['AVL'][item]['TYPE'] == 'ON'){
usedpercent = -42; // On street parking, force it to red as capacity is zero
}
if (used > capacity && data['AVL'][item]['TYPE'] == 'OFF'){ // Indication that the garage's icon should be grey.
usedpercent = -1;
}
if(isNaN(capacity) || used < 0 || capacity < 0){
usedpercent = -1; //flag for grey
}
details = buildinfo(data['AVL'][item],item);
z.push({
details:details,
dataArea:dataArea,
capacity:capacity,
availability:avail,
usedpercent:usedpercent,
rates:data['AVL'][item]['RATES'],
type:data['AVL'][item]['TYPE']
});
dataArea = [];
}
fillDetails();
fillMap('availability');
}
// Display the detailed descriptions into the console (#f) area.
function fillDetails(){
var i = z.length;
var longstring=[];
while(i--){
//$("#f").append(z[i]["details"]); // That is really slow.
// Prefer +=, but joining an array is fast for IE.
// http://stackoverflow.com/questions/153381/javascript-string-concatenation-faster-than-this-example
longstring[longstring.length] = (z[i]["details"]);
}
$("#f").html(introMessage + longstring.join(""));
}
//Fill the map's contents with polylines, markers, etc.
function fillMap(typeOfMap){
var details,dataArea,usedpercent,typeOfData,segment,color,marker,image;
var numItems,i;
if(typeof typeOfMap === 'undefined'){
typeOfMap = 'availability';
}
numItems = z.length ? z.length : 0;
for(i = 0; i < numItems;i++){
details = z[i]['details'];
dataArea = z[i]['dataArea'];
usedpercent = z[i]['usedpercent'];
typeOfData = z[i]['type'];
segment = usedpercent;
//c(usedpercent);
//c(z[i]);
if(typeOfData == 'ON'){
// On street parking. Create a polyline.
if(typeOfMap == 'price'){
if(typeof z[i]['rates'] === 'undefined'){
segment = -1;
}else{
segment = rateFinder(z[i]['rates'],z[i]);
}
} else if(typeOfMap == 'availability'){
if(isNaN(segment)){
segment = -42;
} else if(segment > 100){
segment = -1;
}
}
color = segmentColorizer(segment,typeOfMap);
marker = new google.maps.Polyline({
path: dataArea,
map:map,
strokeColor:color,
strokeOpacity:0.8,
strokeWeight:(map.getZoom() < 14) ? 4 : 7,
fillColor:color,
fillOpacity:0.8
});
}else{
// Parking garage. Create a marker.
image = garageIcon(segment,typeOfMap,z[i]['rates']);
marker = new google.maps.Marker({
position: dataArea[0],
map: map,
//title:availpercent.toString(),
icon:image
});
}
markersArray.push({marker:marker,index:i});
selectionPanListener(marker,i,details);
}
}
// return a lat/long to panTo. Different based on whether the datastructure represents a garage single point or on street two points.
function getSpotLocation(location){
var n,m;
var theLocation;
try{
// Find the midpoint of the two given points for a blockface.
m = location.getPath()['b'][0];
n = location.getPath()['b'][1];
theLocation = new google.maps.LatLng((m.lat() + n.lat()) / 2.0, (m.lng() + n.lng()) / 2.0);
} catch(e){
theLocation = location['position'];
}
return theLocation;
}
// get rid of all markers
function clearOverlays(opts){
var i;
var erase;
if(markersArray){
i = markersArray.length;
while(i--){
markersArray[i]['marker'].setMap(null);
}
}
//opts = typeof(opts) == 'undefined' ? opts : null;
//var erase = (opts.hasOwnProperty('eraseCircle')) ? opts['eraseCircle'] : false;
erase = (typeof opts['eraseCircle'] == 'boolean') ? opts['eraseCircle'] : false;
if(erase && circlemarker){
circlemarker.setMap(null);
}
}
//Create listener for map markers
function selectionPanListener(marker, number, message) {
google.maps.event.addListener(marker, 'click', function() {
$('#i-' + number).click(); // trigger the map panTo, and results highlighting
});
}
// console log function.
function c(f){
//console.error(f); // error to have it show up on iphone/iphad
try { console.log(f) } catch (e) { alert(f) }
}
//join convience method.
function S() {
return Array.prototype.join.call( arguments, '' );
}
// Return a url to an appropriate icon image based upon availability bucket.
function garageIcon(amount,iconType,details){
//amount is 'amount available'
iconType = iconType.toLowerCase();
var location = '/wp-content/uploads/icons/';
var useTiny = (map.getZoom() <= (zoomLevel - 2)) ? true : false;
if(iconType == 'availability'){
// lookup code: mapping availability % to specific icon name.
if(amount > 85){
location += 'p_red';
} else if(amount <= 85 && amount >= 70){
location += 'p_lightblue';
} else if(amount < 70 && amount >= 0){
location += 'p_darkblue';
} else if(amount == -1 || amount == -2){
location += 'p_grey';
} else {//dead branch ?
location += 'p_grey';
}
}else if(iconType == 'pricing' || iconType == 'price'){
//price = rateFinder(z[i]['rates']);
price = rateFinder(details);
//c('Found garage price is: '+ price );
//c(details);
if(price >= 4.01){
location += 'p_darkgreen';
} else if(price >= 2.01 && price < 4.01){
location += 'p_midgreen';
} else if(price < 2.01 && price >= 0.00){
location += 'p_lightgreen';
} else {
location += 'p_grey';
}
}
if(useTiny){
location += '_tiny.png';
} else {
location += '_small.png';
}
return location;
}
// Format the time information.
function timeParse(data){
// return data.hasOwnProperty('TO') ? S('From: ',data['FROM'],' to ',data['TO'],' ',data['BEG'],' - ',data['END'],'