Fire JS Bin - Rick-fare-Map

var rm = new
function () {
  this.service = new google.maps.DirectionsService();
  this.m = [];
  this.paths = [];
  this.p = "";
  this.l = "";
  this.c = {
    0: 'red',
    1: 'blue',
    2: 'orange'
  };
  this.directions = function () {
    if (rm.pline) rm.pline.setMap(null);
    $("#info .content").empty();
    var o = rm.m[0].position;
    var d = rm.m[1].position;
    rm.service.route({
      origin: o,
      destination: d,
      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      unitSystem: google.maps.DirectionsUnitSystem.METRIC,
      optimizeWaypoints: true,
      provideRouteAlternatives: true
    }, rm.process)
  };
  this.process = function (r, s) {
    rm.routes = r.routes;
    for (var i = 0; i < rm.routes.length; i++) {
      rm.paths[i] = new google.maps.MVCArray();
      for (rno in rm.routes[i].legs) {
        for (sno in rm.routes[i].legs[rno].steps) {
          for (coord in rm.routes[i].legs[rno].steps[sno].lat_lngs) {
            rm.paths[i].push(rm.routes[i].legs[rno].steps[sno].lat_lngs[coord])
          }
        }
      }
    }
    rm.pline = new google.maps.Polyline({
      strokeOpacity: 0.6,
      strokeWeight: 8
    });
    rm.showroute(0);
    rm.results()
  };
  this.showroute = function (r) {
    rm.pline.setOptions({
      strokeColor: rm.c[r]
    });
    rm.pline.setPath(rm.paths[r]);
    rm.pline.setMap(rm.map)
  };
  this.results = function () {
    var c = $("#info .content");
    var i = 0;
    var a = [];
    var b = '<table id="rid"><tr><th>Dist. (km)</th><th>Units read</th><th>Fare (Rs.)</th></tr>';
    $(rm.routes).each(function () {
      var d = rm.routes[i].legs[0].distance.value * .001;
      a.push(d);
      b += '<tr class="route_' + i + '" style="';
      if (i == 0) b += 'color:#fff;';
      else b += 'color:#333;';
      b += '"><td class="' + rm.c[i] + '">' + d.toFixed(2) + '</td><td class="' + rm.c[i] + '">' + rm.units(d) + '</td><td class="' + rm.c[i] + '">' + rm.fare(rm.units(d), rm.p) + '</td></tr>';
      i++
    });
    b += '</table>';
    a.sort().reverse();
    var e = rm.fare(rm.units(a[0]), rm.p);
    b += '<p>You should not be paying more than <b>Rs. ' + e + '</b>.</p>';
    c.append(b);
    $("#rid tr").click(function () {
      var n = this.className.split("_");
      for (var i = 0; i < rm.routes.length; i++) {
        if (i == n[1]) {
          $(this).css({
            color: '#fff'
          });
          rm.showroute(i)
        } else {
          $(".route_" + i).css({
            color: '#333'
          })
        }
      }
    })
  };
  this.units = function (d) {
    switch (rm.p) {
    case "ahmadabad":
      if (d <= 1) return units = 24;
      else return ((((d - 1.2) / .2) * 4) + 24).toFixed(0);
      break;
    case "delhi":
    case "pune":
    case "mumbai":
    case "bangalore":
      return d.toFixed(2);
      break
    }
  };
  this.fare = function (u) {
    switch (rm.p) {
    case "ahmadabad":
      var a = range(25, 500, 4);
      var b = 0;
      for (var i = 0; i < a.length; i++) {
        if (u >= a[i]) {
          b = i + 1
        } else if (u <= 24) {
          b = 0
        }
      }
      b = (b * 1.2) + 9;
      break;
    case "delhi":
      b = ((u - 1) * 4.5) + 10;
      break;
    case "pune":
      b = ((u - 1) * 8) + 11;
      break;
    case "mumbai":
      b = ((u - 1) * 14) + 11;
      break;
    case "bangalore":
      if (u <= 2.5) {
        b = 14 + 3
      } else {
        b = ((u - 2) * 10) + 14
      }
      break
    }
    return b.toFixed(2)
  };
  this.defaultLoc = function (l) {
    if (!l) {
      $(".err").html("Unfortunately, we do not have data about your location. To show you a demo atleast, we're falling back to Ahmedabad, India.");
      rm.p = "ahmadabad";
      rm.l = new google.maps.LatLng(23.024, 72.580);
      rm.map.setCenter(rm.l)
    } else {
      var a;
      switch (l) {
      case "ahmadabad":
        a = new google.maps.LatLng(23.024, 72.580);
        break;
      case "bangalore":
        a = new google.maps.LatLng(12.964, 77.577);
        break;
      case "delhi":
        a = new google.maps.LatLng(28.649, 77.205);
        break;
      case "mumbai":
        a = new google.maps.LatLng(18.985, 72.835);
        break;
      case "pune":
        a = new google.maps.LatLng(18.517, 73.858);
        break
      }
      rm.setLoc(l, a);
      rm.clear()
    }
  };
  this.setLoc = function (p, l) {
    rm.p = p, rm.l = l;
    rm.map.setCenter(l);
    $("#loc").val(p)
  };
  this.clear = function () {
    if (rm.pline) rm.pline.setMap(null);
    $("#info .content").empty();
    if (rm.m.length > 0) {
      for (var i = 0; i < rm.m.length; i++) {
        rm.m[i].setMap(null)
      }
      rm.m = []
    }
  };
  this.dialog = function (a) {
    var d = $("#dialog");
    var w = $(window).width();
    var h = $(window).height();
    if ($("#msg").length == 0) {
      var b = "<div id='btns'><a href='#' id='pick' class='btn'>Pick a location</a><a href='#' id='use' class='btn'>Use my location</a></div>";
      var m = "<div id='msg'></div>";
      d.append(m + b);
      $('#msg').html(a)
    }
    var t = (h / 2) - (d.height() / 2);
    var l = (w / 2) - (d.width() / 2);
    $("#overlay").css({
      width: w,
      height: h
    }).show();
    d.addClass("r").css({
      top: t,
      left: l
    }).show()
  };
  this.click = function (l) {
    if (rm.m.length < 2) {
      var m = new google.maps.Marker({
        position: l,
        map: rm.map,
        draggable: true
      });
      google.maps.event.addListener(m, "dragend", rm.directions);
      rm.m.push(m)
    }
    if (rm.m.length == 2) rm.directions()
  };
  this.yes = function (p) {
    if ($("#info").is(".p")) return;
    $("#info").addClass("p");
    var l = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
    var g = new google.maps.Geocoder();
    g.geocode({
      'latLng': l
    }, function (r, s) {
      if ($("#info").is(".g")) return;
      $("#info").addClass("g");
      var n = r[0].formatted_address;
      var a = "";
      if (r.indexOf("Ahmedabad") == -1 || r.indexOf("Ahmadabad") == -1) {
        a = "ahmadabad"
      } else if (r.indexOf("Bangalore") == -1) {
        a = "bangalore"
      } else if (r.indexOf("Delhi") == -1) {
        a = "delhi"
      } else if (r.indexOf("Mumbai") == -1) {
        a = "mumbai"
      } else if (r.indexOf("Pune") == -1) {
        a = "pune"
      } else {
        rm.defaultLoc();
        return
      }
      rm.setLoc(a, l)
    })
  };
  this.no = function (a) {
    rm.defaultLoc()
  };
  this.init = function () {
    rm.map = new google.maps.Map(document.getElementById("map"), {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      navigationControl: true,
      scaleControl: false,
      navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
      }
    });
    google.maps.event.addListener(rm.map, 'click', function (e) {
      rm.click(e.latLng)
    });
    rm.dialog("<p>Rick-fare Map enables you to know how much you should pay for your auto-rickshaw trip.</p><p>To start you can use the location we've detected, or pick another if you like. Next, click the map again for your destination to see suggested routes.</p><p>Note: You can also drag the markers around to update routes.</p><p class='err'></p>");
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(rm.yes, rm.no)
    }
  }
};
$(function () {
  rm.init();
  $(window).resize(function () {
    if (!$("#dialog").is(":hidden")) rm.dialog()
  });
  $("#pick").click(function () {
    $("#dialog, #overlay").hide()
  });
  $("#use").click(function () {
    if (rm.l != "") {
      rm.click(rm.l);
      $("#dialog, #overlay").hide()
    } else {
      if (!$(".err").is(':empty')) {
        rm.click(rm.l);
        $("#dialog, #overlay").hide()
      } else {
        rm.defaultLoc()
      }
    }
  });
  $("#loc").change(function () {
    rm.defaultLoc($(this).val())
  })
});

function range(a, b, c) {
  var d = [];
  var e, endval, plus;
  var f = c || 1;
  var g = false;
  if (!isNaN(a) && !isNaN(b)) {
    e = a;
    endval = b
  } else if (isNaN(a) && isNaN(b)) {
    g = true;
    e = a.charCodeAt(0);
    endval = b.charCodeAt(0)
  } else {
    e = (isNaN(a) ? 0 : a);
    endval = (isNaN(b) ? 0 : b)
  }
  plus = ((e > endval) ? false : true);
  if (plus) {
    while (e <= endval) {
      d.push(((g) ? String.fromCharCode(e) : e));
      e += f
    }
  } else {
    while (e >= endval) {
      d.push(((g) ? String.fromCharCode(e) : e));
      e -= f
    }
  }
  return d
}

<!DOCTYPE html>
<html>
  
  <head>
    <title>Rick-fare Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/attach/typekit.css" />
  </head>
  
  <body>
    <div id="wrapper">
      <div id="map"></div>
      <div id="dialog"></div>
      <div id="info" class="r">
        <div class="content"></div>
        <div>
          <a id="logo">Rick-fare Map</a>
          <select id="loc" class="tk-museo-slab">
            <option value="ahmadabad">Ahmedabad</option>
            <option value="bangalore">Bangalore</option>
            <option value="delhi">Delhi</option>
            <option value="mumbai">Mumbai</option>
            <option value="pune">Pune</option>
          </select>
        </div>
      </div>
      <div id="overlay"></div>
    </div>
  </body>

</html>

html, body, #wrapper { width:100%; height:100%; padding:0; margin:0; overflow:hidden }
body { font-size:13px }
a { outline:none }
#map { height:100%; background:#ccc }
#dialog { color:#000; padding:16px; width:260px; background:#ddd; position:fixed; z-index:5000; top:0; background-image:-moz-linear-gradient(top, #ddd, #aaa); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(1, #aaa)); text-shadow:0 1px 1px rgba(255, 255, 255, 1); border:1px solid #999 }
#info { color:#333; background:#ddd; width:280px; position:fixed; right:20px; bottom:30px; z-index:300; padding:14px; background-image:-moz-linear-gradient(top, #ddd, #aaa); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(1, #aaa)); border:1px solid #999 }
#info p { font-size:17px; text-shadow:0 1px 1px rgba(255, 255, 255, 1) }
#logo { font-size:20px; font-weight:bold; color:#444; text-shadow:0 1px 1px rgba(255, 255, 255, 1) }
#loc { outline:none; font-size:10px; width:90px; float:right; padding:0; margin:0; padding:4px; background:#555; color:#fff; border:none; border:1px solid #333 }
#loc option { outline:none }
#rid { width:100%; border-collapse:separate; border-spacing:0 8px; margin-top:8px; font-weight:bold; padding:0; margin:0 }
#rid th { font-size:11px; text-align:left; padding-left:7px; text-shadow:0 1px 1px rgba(255, 255, 255, 1) }
#rid tr { cursor:pointer }
#rid td { padding:4px 8px; font-size:16px }
#btns { margin:8px 0 }
.btn { padding:4px 6px; font-size:90%; margin-right:6px; margin-bottom:12px; color:#fff; text-decoration:none; font-weight:bold; background-color:#666; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); border-bottom:1px solid rgba(0, 0, 0, 0.25); -moz-border-radius:4px; -webkit-border-radius:4px }
.btn:hover { background:#c33100 }
#overlay { width:100%; height:100%; filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; background:#333; position:absolute; top:0; left:0; z-index:3000; display:none }
.r { -moz-border-radius:8px; -webkit-border-radius:8px; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.4); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.4) }
.err { color:#c33100 }
.red { background:#f41 }
.blue { background:#4682B4 }
.orange { background:orange }
#dialog, .tk-museo-slab, body { font-family: "museo-slab-1", "museo-slab-2", "arial", sans-serif; }