+ /**
+ * Set the zone from the given "zone" parameter and then unhide it.
+ */
+ function set_zone(zone) {
+ const z = document.getElementById("zone");
+
+ z.textContent = zone;
+ z.style.display = "block"; /* hidden by default */
+ }
+
+
+ /**
+ * Resize the ticket background based on the service name.
+ * The BaltimoreLink, Commuter Bus, and MARC Train tickets
+ * are all different heights and are arranged vertically a
+ * bit different.
+ *
+ * Rather than design three completelty separate tickets and
+ * then have to keep track of which one we're using, I have
+ * instead decided to use one ticket and to reposition it
+ * on-the-fly based on the service name. This is necessarily
+ * a bit ugly because it involves a lot of magic numbers that
+ * can only be explained if you open up inkscape with a CharmPass
+ * screenshot to see where things belong and how to get them there.
+ *
+ * The SVG was designed with BaltimoreLink in mind, so this
+ * is a no-op if the service is BaltimoreLink.
+ */
+ function resize_ticket() {
+ /* Get the "servicename" from the querystring if it's there */
+ const params = new URLSearchParams(document.location.search);
+ const tbg = document.getElementById("ticketbg");
+ const t = document.getElementById("ticket");
+ const sn = document.getElementById("servicename");
+
+ if (params.get("servicename") === "Commuter Bus") {
+ /* The top of the background is initially at y=246.859, and
+ * we scale it by a factor of 1.12 to y=276.482 for a change
+ * of 29.623. So after we scale it, we translate it upwards
+ * by that amount to put it back where it started. */
+ tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
+
+ /* Now translate the entire ticket up by the magic amount, 1/5
+ * of the size change we made to the background. This ratio
+ * was found by measuring pixels in side-by-side screenshots
+ * of BaltimoreLink and Commuter Bus tickets. */
+ t.setAttribute("transform", "translate(0 -9.33)");
+
+ /* More magic numbers discovered by comparing the two
+ * tickets overlayed in inkscape */
+ sn.setAttribute("transform", "translate(0 64.28)");
+ }
+ else if (params.get("servicename") === "MARC Train") {
+ /* insane tricks are explained above */
+ tbg.setAttribute("transform",
+ "translate(0 -72.378) scale(1 1.2932)");
+ t.setAttribute("transform", "translate(0 -67.17)");
+ sn.setAttribute("transform", "translate(0 131.0)");
+ }
+ }
+
+
+ /**
+ * Set the security code from the querystring if it was given;
+ * otherwise generate a random code.
+ */
+ function set_code() {
+ const ct = document.getElementById("codetext");
+
+ /* Get the "code" from the querystring if it's there */
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("code")) {
+ ct.textContent = params.get("code").toUpperCase();
+ }
+ else {
+ /* Otherwise, use a random code */
+ const bucket = ["0","1","2","3","4","5","6","7","8","9",
+ "A","B","C","D","E","F","G","H","I","J",
+ "K","L","M","N","O","P","Q","R","S","T",
+ "U","V","W","X","Y","Z"];
+
+ /* Two random ints between 0 and 35 */
+ const i1 = Math.floor(Math.random() * 36);
+ const i2 = Math.floor(Math.random() * 36);
+ const d1 = bucket[i1];
+ const d2 = bucket[i2];
+ ct.textContent = d1 + d2;
+ }
+ }
+
+
+ /**
+ * Center the security code within its container.
+ *
+ * Some codes like "II" and "WW" can take up wildly different
+ * amounts of horizonetal space, but they should always be
+ * centered inside their little red box. This turns out to be
+ * harder than it sounds because we can only find the width of
+ * the code in browser coordinates, whereas its "x" coordinate
+ * is in SVG coordinates. Anyway, we do it.
+ */
+ function center_code() {
+ /* Center the security code inside its red box */
+ const ct = document.getElementById("codetext");
+ const bg = document.getElementById("codebg");
+
+ /* First, find the center of the red box */
+ const r1 = bg.getBoundingClientRect();
+ const c1 = r1.left + (r1.width / 2);
+
+ /* Now the center of the code text */
+ const r2 = ct.getBoundingClientRect();
+ const c2 = r2.left + (r2.width / 2);
+
+ /* What do we add to c2 to make it equal to c1? */
+ const hdelta = c1 - c2;
+
+ /* We've measured everything so far in "client rect"
+ * coordinates, because that's the only available measurement
+ * we have for the width of the <text> element. But when we
+ * reposition that <text> element, it will be by adjusting its
+ * "x" attribute, and that attribute uses a different coordinate
+ * system than the client rect does. Specifically, "x" refers to
+ * an offset within the SVG's coordinate system, and the client
+ * rect coordinates are pixels on-screen. To convert between the
+ * two, we can take the "width" attribute of the background
+ * element and compare it to the width of the background
+ * element's client rect. Since the size of the background is
+ * fixed, this should give us a multiplier that turns client rect
+ * distances (what we have) into SVG distances (what we want) */
+ const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
+
+ /* Convert hdelta from client rect to SVG coordinates */
+ const svg_hdelta = hdelta * client_to_svg;
+
+ /* Since this <text> element has an "x" attribute it's easier for
+ * us to shift that than it is to mess with the "left" style. */
+ ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
+ }
+
+ /**
+ * Set the ticket's expiration date and time.
+ *
+ * BaltimoreLink and MARC Train tickets expire after 90 minutes;
+ * while Commuter Bus tickets expire after 10 minutes.
+ */
+ function set_ticket_expiry() {
+ /* There are two parameters, time and date, that we store in one
+ * underlying "date" variable. */
+ const date = new Date();
+
+ /* BaltimoreLink and MARC Train */
+ let minutes = 90;
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("servicename") === "Commuter Bus") {
+ /* Commuter bus tickets are only valid for ten minutes */
+ minutes = 10;
+ }
+
+ /* We use the low-level get/setTime to change the number of
+ * milliseconds since the epoch that this date represents
+ * Obviously correct, and avoids all suspicious corner cases
+ * for a few more decades. */
+ date.setTime(date.getTime() + (minutes*60*1000));
+
+ tt = document.getElementById("tickettime");
+ tt.textContent = date.toLocaleTimeString();
+
+ const td = document.getElementById("ticketdate");
+ const dateopts = {
+ day: "2-digit",
+ month: "2-digit",
+ year: "2-digit"
+ };
+ td.textContent = date.toLocaleDateString("en-US", dateopts);
+ }
+
+
+ /**
+ * Swap the day/night sky colors.
+ *
+ * We use CSS classes to keep track of the current state because
+ * it's a tiny bit cleaner than a global variable, but for some
+ * reason we can't use those same classes to actually change the
+ * color. (The classes, change, but the color doesn't.) Rather
+ * than waste time trying to explain this, we just set the "fill"
+ * attribute ourselves whenever we swap classes.
+ */
+ function swap_day_night() {
+ const sky = document.getElementById("sky");
+
+ if (sky.getAttribute("class") === "night") {
+ sky.setAttribute("fill", "#efb02f");
+ sky.setAttribute("class", "day");
+ }
+ else {
+ /* Put this case second so that the first time the
+ * screen is tapped (when there are no classes on
+ * the sky element) the color still changes. */
+ sky.setAttribute("fill", "#143b66");
+ sky.setAttribute("class", "night");
+ }
+ }
+
+
+ /**
+ * Compute the zone (string) for the given origin/destination pair.
+ *
+ * If we don't know it or if you chose in invalid pair (destination
+ * not on the same line as your origin?) then null is returned.
+ */
+ function compute_marc_zone(src, dest) {
+
+ /* Sorted on the first component, then the second.
+ *
+ * Key:
+ *
+ * $6.00 => 1
+ * $7.00 => 2
+ * $8.00 => 3
+ * $9.00 => 4
+ */
+ const zone_map = {
+ BAL_BWE: 2,
+ BAL_BWI: 1,
+ BAL_HAE: 1,
+ BAL_SEB: 3,
+ BAL_WAS: 4,
+ BAL_WBL: 1,
+ BCA_CPK: 3,
+ BCA_WAS: 4,
+ BWE_BWI: 1,
+ BWE_HAE: 1,
+ BWE_SEB: 1,
+ BWE_WAS: 2,
+ BWE_WBL: 2,
+ BWI_HAE: 1,
+ BWI_SEB: 2,
+ BWI_WAS: 3,
+ BWI_WBL: 1,
+ HAE_SEB: 2,
+ HAE_WAS: 3,
+ HAE_WBL: 1,
+ SEB_WAS: 1,
+ SEB_WBL: 3,
+ WAS_WBL: 4
+ };
+
+ /* Forward direction key for zone_map */
+ const fwd = src + "_" + dest;
+
+ /* Reverse direction key for zone_map. The zone_map only
+ * has them listed in one direction, so we check both
+ * directions here. */
+ const rev = dest + "_" + src;
+
+ /* The default. Obviously wrong for when we don't
+ * have the necessary data. */
+ let zone = -1;
+
+ if (zone_map[fwd]) {
+ zone = zone_map[fwd];
+ }
+ else if (zone_map[rev]) {
+ zone = zone_map[rev];
+ }
+
+ /* Convert the number to a string */
+ switch (zone) {
+ case 1:
+ return "One Zone";
+ case 2:
+ return "Two Zone";
+ case 3:
+ return "Three Zone";
+ case 4:
+ return "Four Zone";
+ default:
+ return null;
+ }
+ }
+
+
+ /**
+ * Compute and set the zone.
+ *
+ * We can be given a zone in two ways. First, on Commuter Bus
+ * tickets, it is given explicitly via the querystring. But
+ * It can also be specified implicitly via the origin and
+ * destination on a MARC Train ticket. Here we try both and
+ * then call set_zone() with the result if something worked.
+ */
+ function compute_and_set_zone() {
+ const params = new URLSearchParams(document.location.search);
+ const src = params.get("origin");
+ const dest = params.get("destination");
+
+ if (src && dest) {
+ /* MARC Train. We can assume that compute_marc_zone() doesn't
+ * return null because that's part of our form validation. */
+ const zone = compute_marc_zone(src, dest);
+ set_zone(zone);
+ }
+ else if (params.get("zone")) {
+ /* Commuter Bus */
+ set_zone(params.get("zone"));
+ }
+ }
+
+
+ /**
+ * Set the origin and destination for the MARC Train if they
+ * were provided, and unhide them if so.
+ */
+ function set_marc_origin_destination() {
+ const params = new URLSearchParams(document.location.search);
+ if (!params.get("origin") || !params.get("destination")) {
+ return;
+ }