From 5ca12ff53b0b8169f390f63b03b4e0f520e9abbb Mon Sep 17 00:00:00 2001
From: Dan Hamik <dan@hamik.net>
Date: Mon, 18 Aug 2025 15:32:27 -0500
Subject: [PATCH] merging in changes to do ipv6 and comments

---
 subnets.html | 728 +++++++++++++++++++++++++--------------------------
 1 file changed, 356 insertions(+), 372 deletions(-)
diff --git a/subnets.html b/subnets.html
index 09a6201..fd1caa7 100644
--- a/subnets.html
+++ b/subnets.html
@@ -1,82 +1,115 @@
 <html>
 <head>
 <title>Visual Subnet Calculator</title>
-<script language="javascript" type="text/javascript">
-<!--
+<script src="calculations_4.js"></script>
+<script src="calculations_6.js"></script>
+<script src="calculations.js"></script>
 
-var curNetwork = 0;
-var curMask = 0;
+<script language="javascript" type="text/javascript">
+  var curNetwork = 0;
+  var curMask = 0;
+
+  var curVersion = 4;
 var curComments = {};
 
-function updateNetwork()
-{
-  var newNetworkStr = document.forms['calc'].elements['network'].value;
-  var newMask = parseInt(document.forms['calc'].elements['netbits'].value);
+  function updateNetwork() {
+    var newNetworkStr = document.forms["calc"].elements["network"].value;
+    var newMask = parseInt(
+      document.forms["calc"].elements["netbits"].value
+    );
+    var newVersion = parseInt(
+      document.forms["calc"].elements["version"].value
+    );
 
-  var newNetwork = inet_aton(newNetworkStr);
+    var newNetwork = inet_aton(newVersion, newNetworkStr);
 
-  if (newNetwork === null) {
-    alert('Invalid network address entered');
-    return;
+    if (newNetwork === null) {
+      alert("Invalid network address entered");
+      return;
+    }
+
+    var tmpNetwork = network_address(newVersion, newNetwork, newMask);
+    if (newNetwork != tmpNetwork) {
+      alert(
+        "The network address entered is not on a network boundary for this mask.\nIt has been changed to " +
+        inet_ntoa(newVersion, tmpNetwork) +
+        "."
+      );
+      newNetwork = tmpNetwork;
+      document.forms["calc"].elements["network"].value = inet_ntoa(
+        newVersion,
+        tmpNetwork
+      );
+    }
+
+    if ((newVersion == 4 && (newMask < 0 || newMask > 32)) || (newVersion == 6 && (newMask < 0 || newMask > 128))) {
+      alert("The network mask you have entered is invalid");
+      return;
+    }
+
+    if (curMask == 0) {
+      curMask = newMask;
+      curNetwork = newNetwork;
+      curVersion = newVersion;
+      startOver();
+    } else if (
+      (curMask != newMask || curVersion != newVersion) &&
+      confirm(
+        "You are changing the base network from /" +
+          curMask + "(v" + curVersion +
+          ") to /" +
+          newMask + "(v" + newVersion +
+          "). This will reset any changes you have made. Proceed?"
+      )
+    ) {
+      curMask = newMask;
+      curNetwork = newNetwork;
+      curVersion = newVersion;
+
+      startOver();
+    } else {
+      document.forms["calc"].elements["netbits"].value = curMask;
+      curNetwork = newNetwork;
+
+      recreateTables();
+    }
   }
 
-  var tmpNetwork = network_address(newNetwork, newMask);
-  if (newNetwork != tmpNetwork) {
-    alert('The network address entered is not on a network boundary for this mask.\nIt has been changed to '+inet_ntoa(tmpNetwork)+'.');
-    newNetwork = tmpNetwork;
-    document.forms['calc'].elements['network'].value = inet_ntoa(tmpNetwork);
-  }
-
-  if (newMask < 0 || newMask > 32) {
-    alert('The network mask you have entered is invalid');
-    return;
-  }
-
-  if (curMask == 0) {
-    curMask = newMask;
-    curNetwork = newNetwork;
-    startOver();
-  }
-  else if (curMask != newMask && confirm('You are changing the base network from /'+curMask+' to /'+newMask+'. This will reset any changes you have made. Proceed?')) {
-    curMask = newMask;
-    curNetwork = newNetwork;
-
-    startOver();
-  }
-  else {
-    document.forms['calc'].elements['netbits'].value = curMask;
-    curNetwork = newNetwork;
+  function startOver() {
+    rootSubnet = [0, 0, null];
 
     recreateTables();
   }
-}
 
-function startOver()
-{
-  rootSubnet = [0, 0, null];
+  function recreateTables() {
+    var calcbody = document.getElementById("calcbody");
+    if (!calcbody) {
+      alert("Body not found");
+      return;
+    }
 
-  recreateTables();
-}
+    while (calcbody.hasChildNodes()) {
+      calcbody.removeChild(calcbody.firstChild);
+    }
 
-function recreateTables()
-{
-  var calcbody = document.getElementById('calcbody');
-  if (!calcbody) {
-    alert('Body not found');
-    return;
-  }
+    updateNumChildren(rootSubnet);
+    updateDepthChildren(rootSubnet);
 
-  while (calcbody.hasChildNodes()) {
-    calcbody.removeChild(calcbody.firstChild);
-  }
+    createRow(
+      calcbody,
+      rootSubnet,
+      curNetwork,
+      curMask,
+      [curMask, rootSubnet[1], rootSubnet],
+      rootSubnet[0]
+    );
 
-  updateNumChildren(rootSubnet);
-  updateDepthChildren(rootSubnet);
+    document.getElementById("joinHeader").colSpan =
+      rootSubnet[0] > 0 ? rootSubnet[0] : 1;
+    document.getElementById("col_join").span =
+      rootSubnet[0] > 0 ? rootSubnet[0] : 1;
 
-  createRow(calcbody, rootSubnet, curNetwork, curMask, [curMask, rootSubnet[1], rootSubnet], rootSubnet[0]);
-
-  document.getElementById('joinHeader').colSpan = (rootSubnet[0] > 0 ? rootSubnet[0] : 1);
-  document.getElementById('col_join').span = (rootSubnet[0] > 0 ? rootSubnet[0] : 1);
+    /* Create the bookmark hyperlink */
 
   /* Disable joins for subnets with comments. */
   var joinLocks = {}; // a unique collection of join elements to disable
@@ -111,126 +144,141 @@ function createBookmarkHyperlink() {
                +'&comments='+encodeURIComponent(JSON.stringify(curComments));
   }
 }
-
-function nodeToString(node)
-{
-  if (node[2]) {
-    return '1'+nodeToString(node[2][0])+nodeToString(node[2][1]);
-  }
-  else {
-    return '0';
-  }
-}
-
-function binToAscii(str)
-{
-  var curOut = '';
-  var curBit = 0;
-  var curChar = 0;
-
-  for (var i=0; i<str.length; i++) {
-    if (str.charAt(i) == '1') {
-      curChar |= 1<<curBit;
+  function nodeToString(node) {
+    if (node[2]) {
+      return "1" + nodeToString(node[2][0]) + nodeToString(node[2][1]);
+    } else {
+      return "0";
     }
-    curBit++;
-    if (curBit > 3) {
+  }
+
+  function binToAscii(str) {
+    var curOut = "";
+    var curBit = 0;
+    var curChar = 0;
+
+    for (var i = 0; i < str.length; i++) {
+      if (str.charAt(i) == "1") {
+        curChar |= 1 << curBit;
+      }
+      curBit++;
+      if (curBit > 3) {
+        curOut += curChar.toString(16);
+        curChar = 0;
+        curBit = 0;
+      }
+    }
+    if (curBit > 0) {
       curOut += curChar.toString(16);
-      curChar = 0;
-      curBit = 0;
     }
+    return str.length + "." + curOut;
   }
-  if (curBit > 0) {
-    curOut += curChar.toString(16);
-  }
-  return str.length+'.'+curOut;
-}
 
-function asciiToBin(str)
-{
-  var re = /([0-9]+)\.([0-9a-f]+)/;
-  var res = re.exec(str);
-  var len = res[1];
-  var encoded = res[2];
-  var out = '';
-  for (var i=0; i< res[1]; i++) {
-    var ch = parseInt(res[2].charAt(Math.floor(i/4)), 16);
-    var pos = i % 4;
-    out += (ch & (1<<pos) ? '1' : '0');
-  }
-  return out;
-}
-
-// Recursive function that creates rows working from the outer most mask and working inwards
-function createRow(calcbody, node, address, mask, labels, depth)
-{
-  if (node[2]) { // We need to go deeper
-    var newlabels = labels;
-    newlabels.push(mask+1);
-    newlabels.push(node[2][0][1]);
-    newlabels.push(node[2][0]);
-    createRow(calcbody, node[2][0], address, mask+1, newlabels, depth-1);
-
-    newlabels = new Array();
-    newlabels.push(mask+1);
-    newlabels.push(node[2][1][1]);
-    newlabels.push(node[2][1]);
-    createRow(calcbody, node[2][1], address+subnet_addresses(mask+1), mask+1, newlabels, depth-1);
-  }
-  else { // Actually create a row
-    var newRow = document.createElement('TR');
-    calcbody.appendChild(newRow);
-
-    /* subnet address */
-    var newCell = document.createElement('TD');
-    newCell.appendChild(document.createTextNode(inet_ntoa(address)+'/'+mask));
-    newRow.appendChild(newCell);
-
-    var addressFirst = address;
-    var addressLast = subnet_last_address(address, mask);
-    var useableFirst = address + 1;
-    var useableLast = addressLast - 1;
-    var numHosts;
-    var addressRange;
-    var usaebleRange;
-    var comment = curComments[inet_ntoa(address) + "/" + mask] || null;
-
-    if (mask == 32) {
-      addressRange = inet_ntoa(addressFirst);
-      useableRange = addressRange;
-      numHosts = 1;
+  function asciiToBin(str) {
+    var re = /([0-9]+)\.([0-9a-f]+)/;
+    var res = re.exec(str);
+    var len = res[1];
+    var encoded = res[2];
+    var out = "";
+    for (var i = 0; i < res[1]; i++) {
+      var ch = parseInt(res[2].charAt(Math.floor(i / 4)), 16);
+      var pos = i % 4;
+      out += ch & (1 << pos) ? "1" : "0";
     }
-    else {
-      addressRange = inet_ntoa(addressFirst)+' - '+inet_ntoa(addressLast);
-      if (mask == 31) {
-	useableRange = addressRange;
-	numHosts = 2;
+    return out;
+  }
+
+  function createRow(calcbody, node, address, mask, labels, depth) {
+    if (node[2]) {
+      var newlabels = labels;
+      newlabels.push(mask + 1);
+      newlabels.push(node[2][0][1]);
+      newlabels.push(node[2][0]);
+      createRow(
+        calcbody,
+        node[2][0],
+        address,
+        mask + 1,
+        newlabels,
+        depth - 1
+      );
+
+      newlabels = new Array();
+      newlabels.push(mask + 1);
+      newlabels.push(node[2][1][1]);
+      newlabels.push(node[2][1]);
+      createRow(
+        calcbody,
+        node[2][1],
+        address + subnet_addresses(curVersion, mask + 1),
+        mask + 1,
+        newlabels,
+        depth - 1
+      );
+    } else {
+      var newRow = document.createElement("TR");
+      calcbody.appendChild(newRow);
+
+      /* subnet address */
+      var newCell = document.createElement("TD");
+      newCell.appendChild(
+        document.createTextNode(inet_ntoa(curVersion, address) + "/" + mask)
+      );
+      newRow.appendChild(newCell);
+
+      var addressFirst = address;
+      var addressLast = subnet_last_address(curVersion, address, mask);
+      var useableFirst = subnet_first_address_useable(curVersion, address);
+      var useableLast = subnet_last_address_useable(curVersion, addressLast);
+      var numHosts;
+      var addressRange;
+      var usaebleRange;
+var comment = curComments[inet_ntoa(address) + "/" + mask] || null;
+      if ((curVersion == 4 && mask == 32) || (curVersion == 6 && mask == 128)) {
+        addressRange = inet_ntoa(curVersion, addressFirst);
+        useableRange = addressRange;
+        numHosts = 1;
+      } else {
+        addressRange =
+          inet_ntoa(curVersion, addressFirst) +
+          " - " +
+          inet_ntoa(curVersion, addressLast);
+        if ( (curVersion == 4 && mask == 31) || (curVersion == 6 && mask == 127)) {
+          useableRange = addressRange;
+          numHosts = 2;
+        } else {
+          useableRange =
+            inet_ntoa(curVersion, useableFirst) +
+            " - " +
+            inet_ntoa(curVersion, useableLast);
+          numHosts = num_hosts(curVersion, useableFirst, useableLast);
+        }
       }
-      else {
-	useableRange = inet_ntoa(useableFirst)+' - '+inet_ntoa(useableLast);
-	numHosts = (1 + useableLast - useableFirst);
+
+      /* netmask */
+      var newCell = document.createElement("TD");
+      var netmask = subnet_netmask(curVersion, mask);
+      if (netmask) {
+        newCell.appendChild(
+          document.createTextNode(inet_ntoa(curVersion, netmask))
+        );
       }
-    }
+      newRow.appendChild(newCell);
 
-    /* netmask */
-    var newCell = document.createElement('TD');
-    newCell.appendChild(document.createTextNode(inet_ntoa(subnet_netmask(mask))));
-    newRow.appendChild(newCell);
+      /* range of addresses */
+      var newCell = document.createElement("TD");
+      newCell.appendChild(document.createTextNode(addressRange));
+      newRow.appendChild(newCell);
 
-    /* range of addresses */
-    var newCell = document.createElement('TD');
-    newCell.appendChild(document.createTextNode(addressRange));
-    newRow.appendChild(newCell);
-
-    /* useable addresses */
-    var newCell = document.createElement('TD');
-    newCell.appendChild(document.createTextNode(useableRange));
-    newRow.appendChild(newCell);
-
-    /* Hosts */
-    var newCell = document.createElement('TD');
-    newCell.appendChild(document.createTextNode(numHosts));
-    newRow.appendChild(newCell);
+      /* useable addresses */
+      var newCell = document.createElement("TD");
+      newCell.appendChild(document.createTextNode(useableRange));
+      newRow.appendChild(newCell);
 
+      /* Hosts */
+      var newCell = document.createElement("TD");
+      newCell.appendChild(document.createTextNode(numHosts));
+      newRow.appendChild(newCell);
     /* Comments */
     var newCell = document.createElement('TD');
     var textarea = document.createElement('TEXTAREA');
@@ -261,232 +309,164 @@ function createRow(calcbody, node, address, mask, labels, depth)
     newCell.appendChild(textarea);
     newRow.appendChild(newCell);
 
-    /* actions */
 
-    var newCell = document.createElement('TD');
-    newRow.appendChild(newCell);
+      /* actions */
 
-    if (mask == 32 || comment != null) {
-      var newLink = document.createElement('SPAN');
-      newLink.className = 'disabledAction';
-      newLink.appendChild(document.createTextNode('Divide'));
-      newCell.appendChild(newLink);
-    }
-    else {
-      var newLink = document.createElement('A');
-      newLink.href = '#';
-      newLink.onclick = function () { divide(node); return false; }
-      newLink.appendChild(document.createTextNode('Divide'));
-      newCell.appendChild(newLink);
-    }
-
-    var colspan = depth - node[0];
-
-    for (var i=(labels.length/3)-1; i>=0; i--) {
-      var mask = labels[i*3];
-      var rowspan = labels[(i*3)+1];
-      var joinnode = labels[(i*3)+2];
-
-      var newCell = document.createElement('TD');
-      newCell.rowSpan = (rowspan > 1 ? rowspan : 1);
-      newCell.colSpan = (colspan > 1 ? colspan : 1);
-      newCell.id = "join_" + inet_ntoa(network_address(address, mask)) + "/" + mask;
-
-      if (i == (labels.length/3)-1) {
-	newCell.className = 'maskSpan';
-      }
-      else {
-	newCell.className = 'maskSpanJoinable';
-	newCell.onclick = newJoin(joinnode);
-	//	newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];}
-      }
-
-      var newImg = document.createElement('IMG');
-      newImg.src = 'img/'+mask+'.gif';
-      newCell.appendChild(newImg);
+      var newCell = document.createElement("TD");
       newRow.appendChild(newCell);
 
-      colspan = 1; // reset for subsequent cells
-    }
-  }
-}
+      if ((curVersion == 4 && mask == 32) || (curVersion == 6 && mask == 128)) {
+        var newLink = document.createElement("SPAN");
+        newLink.className = "disabledAction";
+        newLink.appendChild(document.createTextNode("Divide"));
+        newCell.appendChild(newLink);
+      } else {
+        var newLink = document.createElement("A");
+        newLink.href = "#";
+        newLink.onclick = function () {
+          divide(node);
+          return false;
+        };
+        newLink.appendChild(document.createTextNode("Divide"));
+        newCell.appendChild(newLink);
+      }
 
-/* This is necessary because 'joinnode' changes during the scope of the caller */
-function newJoin(joinnode)
-{
-  return function() {
-    join(joinnode);
-    return false; // prevent click event
-  };
-}
+      var colspan = depth - node[0];
 
-function divide(node)
-{
-  node[2] = new Array();
-  node[2][0] = [0, 0, null];
-  node[2][1] = [0, 0, null];
-  recreateTables();
-}
+      for (var i = labels.length / 3 - 1; i >= 0; i--) {
+        var mask = labels[i * 3];
+        var rowspan = labels[i * 3 + 1];
+        var joinnode = labels[i * 3 + 2];
 
-function join(node)
-{
-  /* easy as pie */
-  node[2] = null;
-  recreateTables();
-}
+        var newCell = document.createElement("TD");
+        newCell.rowSpan = rowspan > 1 ? rowspan : 1;
+        newCell.colSpan = colspan > 1 ? colspan : 1;
 
-function updateNumChildren(node)
-{
-  if (node[2] == null) {
-    node[1] = 0;
-    return 1;
-  }
-  else {
-    node[1] = updateNumChildren(node[2][0]) + updateNumChildren(node[2][1]);
-    return node[1];
-  }
-}
+        if (i == labels.length / 3 - 1) {
+          newCell.className = "maskSpan";
+        } else {
+          newCell.className = "maskSpanJoinable";
+          newCell.onclick = newJoin(joinnode);
+          //	newCell.onmouseover = function() { window.status = joinnode[0]+'---'+joinnode[1]+'---'+joinnode[2]+'>>>>>'+node[2];}
+        }
 
-function updateDepthChildren(node)
-{
-  if (node[2] == null) {
-    node[0] = 0;
-    return 1;
-  }
-  else {
-    node[0] = updateDepthChildren(node[2][0]) + updateDepthChildren(node[2][1]);
-    return node[1];
-  }
-}
+        var newImg = document.createElement("IMG");
+        newImg.src = "img/" + mask + ".gif";
+        newCell.appendChild(newImg);
+        newRow.appendChild(newCell);
 
-
-var rootSubnet;
-
-// each node is Array:
-// [0] => depth of children, total number of visible children, children
-
-
-function inet_ntoa(addrint)
-{
-  return ((addrint >> 24) & 0xff)+'.'+
-    ((addrint >> 16) & 0xff)+'.'+
-    ((addrint >> 8) & 0xff)+'.'+
-    (addrint & 0xff);
-}
-
-function inet_aton(addrstr)
-{
-  var re = /^([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})$/;
-  var res = re.exec(addrstr);
-
-  if (res === null) {
-    return null;
-  }
-
-  for (var i=1; i<=4; i++) {
-    if (res[i] < 0 || res[i] > 255) {
-      return null;
+        colspan = 1; // reset for subsequent cells
+      }
     }
   }
 
-  return (res[1] << 24) | (res[2] << 16) | (res[3] << 8) | res[4];
-}
-
-function network_address(ip, mask)
-{
-  var maskbits = 0;
-  for (var i=31-mask; i>=0; i--) {
-    ip &= ~ 1<<i;
+  /* This is necessary because 'joinnode' changes during the scope of the caller */
+  function newJoin(joinnode) {
+    return function () {
+      join(joinnode);
+    };
   }
-  return ip;
-}
 
-function subnet_addresses(mask)
-{
-  return 1<<(32-mask);
-}
-
-function subnet_last_address(subnet, mask)
-{
-  return subnet + subnet_addresses(mask) - 1;
-}
-
-function subnet_netmask(mask)
-{
-  return network_address(0xffffffff, mask);
-}
-
-
-function preloadSubnetImages()
-{
-  if (document.images) {
-    if (!document.preloadedImages) {
-      document.preloadedImages = new Array();
-    }
-
-    for (var i=0; i<=32; i++) {
-      var img = new Image();
-      img.src = 'img/'+i+'.gif';
-      document.preloadedImages.push(img);
-    }
-  }
-}
-
-
-function calcOnLoad()
-{
-  preloadSubnetImages();
-  args = parseQueryString();
-  if (args['network'] && args['mask'] && args['division']) {
-    document.forms['calc'].elements['network'].value = args['network'];
-    document.forms['calc'].elements['netbits'].value = args['mask'];
-
-    if (args['comments']) {
-      curComments = JSON.parse(args['comments']);
-    } else {
-      curComments = {};
-    }
-    updateNetwork();
-    var division = asciiToBin(args['division']);
-    rootSubnet = [0, 0, null];
-    if (division != '0') {
-      loadNode(rootSubnet, division);
-    }
+  function divide(node) {
+    node[2] = new Array();
+    node[2][0] = [0, 0, null];
+    node[2][1] = [0, 0, null];
     recreateTables();
   }
-  else {
-    updateNetwork();
+
+  function join(node) {
+    /* easy as pie */
+    node[2] = null;
+    recreateTables();
   }
-}
 
-function loadNode(curNode, division)
-{
-  if (division.charAt(0) == '0') {
-    return division.substr(1);
+  function updateNumChildren(node) {
+    if (node[2] == null) {
+      node[1] = 0;
+      return 1;
+    } else {
+      node[1] =
+        updateNumChildren(node[2][0]) + updateNumChildren(node[2][1]);
+      return node[1];
+    }
   }
-  else {
-    curNode[2] = new Array();
-    curNode[2][0] = [0, 0, null];
-    curNode[2][1] = [0, 0, null];
 
-    division = loadNode(curNode[2][0], division.substr(1));
-    division = loadNode(curNode[2][1], division);
-    return division;
+  function updateDepthChildren(node) {
+    if (node[2] == null) {
+      node[0] = 0;
+      return 1;
+    } else {
+      node[0] =
+        updateDepthChildren(node[2][0]) + updateDepthChildren(node[2][1]);
+      return node[1];
+    }
   }
-}
 
+  var rootSubnet;
 
-function parseQueryString (str)
+  // each node is Array:
+  // [0] => depth of children, total number of visible children, children
+
+  function preloadSubnetImages() {
+    if (document.images) {
+      if (!document.preloadedImages) {
+        document.preloadedImages = new Array();
+      }
+
+      for (var i = 0; i <= 128; i++) {
+        var img = new Image();
+        img.src = "img/" + i + ".gif";
+        document.preloadedImages.push(img);
+      }
+    }
+  }
+
+  function calcOnLoad() {
+    preloadSubnetImages();
+    args = parseQueryString();
+    if (args["network"] && args["mask"] && args["division"]) {
+      document.forms["calc"].elements["version"].value = args["version"] || 4;
+      document.forms["calc"].elements["network"].value = args["network"];
+      document.forms["calc"].elements["netbits"].value = args["mask"];
+      updateNetwork();
+      var division = asciiToBin(args["division"]);
+      rootSubnet = [0, 0, null];
+      if (division != "0") {
+        loadNode(rootSubnet, division);
+      }
+      recreateTables();
+    } else {
+      updateNetwork();
+    }
+  }
+
+  function loadNode(curNode, division) {
+    if (division.charAt(0) == "0") {
+      return division.substr(1);
+    } else {
+      curNode[2] = new Array();
+      curNode[2][0] = [0, 0, null];
+      curNode[2][1] = [0, 0, null];
+
+      division = loadNode(curNode[2][0], division.substr(1));
+      division = loadNode(curNode[2][1], division);
+      return division;
+    }
+  }
+
+function parseQueryString(str)
 {
   str = str ? str : location.search;
-  var query = str.charAt(0) == '?' ? str.substring(1) : str;
+  var query = str.charAt(0) == "?" ? str.substring(1) : str;
   var args = new Object();
   if (query) {
-    var fields = query.split('&');
+    var fields = query.split("&");
     for (var f = 0; f < fields.length; f++) {
-      var field = fields[f].split('=');
-      args[unescape(field[0].replace(/\+/g, ' '))] = 
-	unescape(field[1].replace(/\+/g, ' '));
+      var field = fields[f].split("=");
+
+      args[unescape(field[0].replace(/\+/g, " "))] = unescape(
+        field[1].replace(/\+/g, " ")
+      );
     }
   }
   return args;
@@ -546,7 +526,6 @@ P		{
   font-weight: bold;
   background-color: #eeeeee;
 }
-
 .calc textarea {
   height: 1.5em;
 }
@@ -562,7 +541,7 @@ P		{
 .maskSpanJoinable {
   background-color: #cccccc;
   text-align: right;
-  cursor: grab;
+ cursor: hand;
 }
 
 .maskSpanRotate {
@@ -586,19 +565,24 @@ P		{
 
 <table cellspacing="0">
 <tr>
+<td class="label">IPv4 / IPv6</td>
 <td class="label">Network Address</td>
 <td class="label">Mask bits</td>
 </tr>
 <tr>
-<td><input type="text" name="network" size="15" maxlength="15" value="192.168.0.0"></td>
-<td>/<input type="text" name="netbits" size="2" maxlength="2" value="16"></td>
-<td><input type="submit" value="Update">
+<td>
+<input type="radio" name="version" value="4" checked />
+<input type="radio" name="version" value="6" />
+</td>
+<td><input type="text" name="network" size="15" maxlength="45" value="192.168.0.0"></td>
+<td>/<input type="text" name="netbits" size="3" maxlength="3" value="16"></td>
+<td><input type="submit" value="Update" />
 <input type="button" value="Reset" onclick="if (confirm('This will reset all subnet divisions you have made. Proceed?')) startOver();">
 </td>
 </tr>
 </table>
 
-<p>Show columns:
+<p>Show columns: 
 <input type="checkbox" id="cb_subnet" checked onclick="toggleColumn(this)"><label for="cb_subnet">Subnet address</label>
 <input type="checkbox" id="cb_netmask" onclick="toggleColumn(this)"><label for="cb_netmask">Netmask</label>
 <input type="checkbox" id="cb_range" checked onclick="toggleColumn(this)"><label for="cb_range">Range of addresses</label>
-- 
2.49.1

