oh shit we're getting somewhere

statusio-selector.js

@@ -13,11 +13,21 @@
 
 // draw frame
 var zNode = document.createElement('div');
-zNode.innerHTML = 'Loading...';
 zNode.setAttribute('id', 'myContainer');
 document.body.appendChild(zNode);
 
 if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
+    // render initial HTML
+    var profilesHTML = '<center><button id="controlplanesButton" type="button">Controlplanes</button>   ' +
+        '<button id="stagesButton" type="button">Stages</button>   <button id="dataplanesButton" type="button">' +
+        'Dataplanes</button>   <button id="shrinkButton" type="button">Shrink</button></center>';
+    zNode.innerHTML = profilesHTML;
+    document.getElementById("controlplanesButton").addEventListener("click", controlplanesButtonClickAction, false);
+    document.getElementById("dataplanesButton").addEventListener("click", dataplanesButtonClickAction, false);
+    document.getElementById("stagesButton").addEventListener("click", stagesButtonClickAction, false);
+    document.getElementById("shrinkButton").addEventListener("click", shrinkButtonClickAction, false);
+
+    // initialize azure component and region variables
     var componentArray = ["api", "auth", "compute", "jobs", "odbc", "webapp", "sql"];
     var regionArray = ["canadacentral", "canadaeast", "centralindia", "southindia", "westindia",
                        "switzerlandnorth", "norwayeast", "westus2", "westus", "southcentralus",
@@ -27,150 +37,409 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
                        "southeastasia", "eastasia", "brazilsouth", "eastus2", "eastus",
                        "centralus", "northcentralus", "francecentral", "chinanorth2", "chinaeast2",
                        "usgovvirginia", "usgovarizona"];
+
+    // create tracking maps
     var selectedComponents = new Map();
     var selectedRegions = new Map();
-
-    // init maps
     for (i = 0; i < componentArray.length; i++) {
         selectedComponents.set(componentArray[i], false);
     }
     for (i = 0; i < regionArray.length; i++) {
         selectedRegions.set(regionArray[i], false)
     }
-    var profilesHTML = '<center><button id="controlPlanesButton type="button">Controlplanes</button>   ' +
-        '<button id="stagesButton type="button">Stages</button>   <button id="dataPlanesButton type="button">' +
-        'Dataplanes</button></center>';
 
-    var controlplanesHTML = '<button id="canadaCentralButton" type="button">canadacentral</button><button id="centralIndiaButton" type="button>centralindia</button>' +
+    // init component div groups
-        '<button id="switzerlandNorthButton" type="button">switzerlandnorth</button><button id="norwayEastButton" type="button">norwayeast</button></br></br>' +
+    var apiGroup = $("div.form-group").filter(":contains('API Service')");
-        '<button id="westUsButton" type="button">westus</button></br></br>' +
+    var authGroup = $("div.form-group").filter(":contains('Authentication')");
-        '<button id="westEuropeButton" type="button">westeurope</button><button id="ukWestButton" type="button">ukwest</button>' +
+    var computeGroup = $("div.form-group").filter(":contains('Compute Service')");
-        '<button id="southAfricaNorthButton" type="button">southafricanorth</button><button id="uaeNorthButton" type="button">uaenorth</button></br></br>' +
+    var jobsGroup = $("div.form-group").filter(":contains('Jobs Service')");
-        '<button id="australiaEastButton" type="button">australiaeast</button><button id="japanEastButton" type="button">japaneast</button>' +
+    var odbcGroup = $("div.form-group").filter(":contains('ODBC/JDBC Service')");
-        '<button id="koreaCentralButton" type="button">koreacentral</button><button id="southeastAsiaButton" type="button">southeastasia</button></br></br>' +
+    var webappGroup = $("div.form-group").filter(":contains('User Interface')");
-        '<button id="brazilSouthButton" type="button">brazilsouth</button><button id="eastUs2Button" type="button">eastus2</button>' +
+    var sqlGroup = $("div.form-group").filter(":contains('Databricks SQL')");
-        '<button id="franceCentralButton" type="button">francecentral</button></br></br>' +
+
-        '<button id="chinaNorth2Button" type="button">chinanorth2</button><button id="chinaEast2Button" type="button">chinaeast2</button>' +
+    // write component HTML template
-        '<button id="usGovVirginiaButton" type="button">usgovvirginia</button><button id="usGovArizonaButton" type="button">usgovarizona</button>';
-    var stagesHTML = '<button id="stage1Button" type="button">Stage-1</button><button id="stage1.5Button" type="button">Stage-1.5</button>' +
-        '<button id="stage2Button" type="button">Stage-2</button><button id="stage3AMButton" type="button">Stage-3AM</button>' +
-        '<button id="stage3PMButton" type="button">Stage-3PM</button><button id="govCloudButton" type="button">Govcloud</button>' +
-        '<button id="mooncakeButton" type="button">Mooncake</button>';
     var componentsHTML = '<button id="allComponentsButton" type="button">AllComponents</button> <button id="apiButton" type="button">API</button>' +
         '<button id="authButton">Auth</button><button id="computeButton" type="button">Compute</button><button id="jobsButton" type="button">Jobs</button>' +
         '<button id="odbcButton" type="button">ODBC/JDBC</button><button id="webappButton" type="button">Webapp</button>' +
         '<button id="sqlButton" type="button">SQL</button></br></br>';
-    function canadaEastButtonClickAction(zEvent) {
+
+    // regional functions
+    function canadaeastButtonClickAction(zEvent) {
         toggleRegion("canadaeast");
-        toggleButtonColor("canadaEastButton");
+        toggleButtonColor("canadaeastButton");
     };
-    function canadaCentralButtonClickAction(zEvent) {
+    function canadacentralButtonClickAction(zEvent) {
         toggleRegion("canadacentral");
-        toggleButtonColor("canadaCentralButton");
+        toggleButtonColor("canadacentralButton");
     };
-    function centralIndiaButtonClickAction(zEvent) {
+    function canadacentralCPButtonClickAction(zEvent) {
+        toggleRegion("canadacentral");
+        toggleRegion("canadaeast");
+        toggleButtonColor("canadacentralButton");
+    }
+    function centralindiaButtonClickAction(zEvent) {
         toggleRegion("centralindia");
-        toggleButtonColor("centralIndiaButton");
+        toggleButtonColor("centralindiaButton");
     };
-    function southIndiaButtonClickAction(zEvent) {
+    function centralindiaCPButtonClickAction(zEvent) {
+        toggleRegion("centralindia");
         toggleRegion("southindia");
-        toggleButtonColor("southIndiaButton");
-    };
-    function westIndiaButtonClickAction(zEvent) {
         toggleRegion("westindia");
-        toggleButtonColor("westIndiaButton");
+        toggleButtonColor("centralindiaButton");
     };
-    function switzerlandNorthButtonClickAction(zEvent) {
+    function southindiaButtonClickAction(zEvent) {
+        toggleRegion("southindia");
+        toggleButtonColor("southindiaButton");
+    };
+    function westindiaButtonClickAction(zEvent) {
+        toggleRegion("westindia");
+        toggleButtonColor("westindiaButton");
+    };
+    function switzerlandnorthButtonClickAction(zEvent) {
         toggleRegion("switzerlandnorth");
-        toggleButtonColor("switzerlandNorthButton");
+        toggleButtonColor("switzerlandnorthButton");
     };
-    function norwayEastButtonClickAction(zEvent) {
+    function norwayeastButtonClickAction(zEvent) {
         toggleRegion("norwayeast");
-        toggleButtonColor("norwayEastButton");
+        toggleButtonColor("norwayeastButton");
     };
-    function westUsButtonClickAction(zEvent) {
+    function westusButtonClickAction(zEvent) {
         toggleRegion("westus");
-        toggleButtonColor("westUsButton");
+        toggleButtonColor("westusButton");
     };
-    function westUs2ButtonClickAction(zEvent) {
+    function westusCPButtonClickAction(zEvent) {
+        toggleRegion("westus");
         toggleRegion("westus2");
-        toggleButtonColor("westUs2Button");
-    };
-    function southCentralUsButtonClickAction(zEvent) {
         toggleRegion("southcentralus");
-        toggleButtonColor("southCentralUsButton");
+        toggleButtonColor("westusButton");
     };
-    function westEuropeButtonClickAction(zEvent) {
+    function westus2ButtonClickAction(zEvent) {
+        toggleRegion("westus2");
+        toggleButtonColor("westus2Button");
+    };
+    function southcentralusButtonClickAction(zEvent) {
+        toggleRegion("southcentralus");
+        toggleButtonColor("southcentralusButton");
+    };
+    function westeuropeButtonClickAction(zEvent) {
         toggleRegion("westeurope");
-        toggleButtonColor("westEuropeButton");
+        toggleButtonColor("westeuropeButton");
     };
-    function northEuropeButtonClickAction(zEvent) {
+    function westeuropeCPButtonClickAction(zEvent) {
+        toggleRegion("westeurope");
         toggleRegion("northeurope");
-        toggleButtonColor("northEuropeButton");
+        toggleButtonColor("westeuropeButton");
-    };
+    }
-    function northEuropeButtonClickAction(zEvent) {
+    function northeuropeButtonClickAction(zEvent) {
         toggleRegion("northeurope");
-        toggleButtonColor("northEuropeButton");
+        toggleButtonColor("northeuropeButton");
     };
-    function ukWestButtonClickAction(zEvent) {
+    function ukwestButtonClickAction(zEvent) {
         toggleRegion("ukwest");
-        toggleButtonColor("ukWestButton");
+        toggleButtonColor("ukwestButton");
     };
-    function ukSouthButtonClickAction(zEvent) {
+    function ukwestCPButtonClickAction(zEvent) {
+        toggleRegion("ukwest");
         toggleRegion("uksouth");
-        toggleButtonColor("ukSouthButton");
+        toggleButtonColor("ukwestButton");
+    }
+    function uksouthButtonClickAction(zEvent) {
+        toggleRegion("uksouth");
+        toggleButtonColor("uksouthButton");
     };
-    function southAfricaNorthButtonClickAction(zEvent) {
+    function southafricanorthButtonClickAction(zEvent) {
         toggleRegion("southafricanorth");
-        toggleButtonColor("southAfricaNorthButton");
+        toggleButtonColor("southafricanorthButton");
     };
-    function uaeNorthButtonClickAction(zEvent) {
+    function uaenorthButtonClickAction(zEvent) {
         toggleRegion("uaenorth");
-        toggleButtonColor("uaeNorthButton");
+        toggleButtonColor("uaenorthButton");
     };
+    function australiaeastButtonClickAction(zEvent) {
+        toggleRegion("australiaeast");
+        toggleButtonColor("australiaeastButton");
+    };
+    function australiaeastCPButtonClickAction(zEvent) {
+        toggleRegion("australiaeast");
+        toggleRegion("australiacentral");
+        toggleRegion("australiacentral2");
+        toggleRegion("australiasoutheast");
+        toggleButtonColor("australiaeastButton");
+    }
+    function australiacentralButtonClickAction(zEvent) {
+        toggleRegion("australiacentral");
+        toggleButtonColor("australiacentralButton");
+    };
+    function australiacentral2ButtonClickAction(zEvent) {
+        toggleRegion("australiacentral2");
+        toggleButtonColor("australiacentral2Button");
+    };
+    function australiasoutheastButtonClickAction(zEvent) {
+        toggleRegion("australiasoutheast");
+        toggleButtonColor("australiasoutheastButton");
+    };
+    function japaneastButtonClickAction(zEvent) {
+        toggleRegion("japaneast");
+        toggleButtonColor("japaneastButton");
+    };
+    function japaneastCPButtonClickAction(zEvent) {
+        toggleRegion("japaneast");
+        toggleRegion("japanwest");
+        toggleButtonColor("japaneastButton");
+    }
+    function japanwestButtonClickAction(zEvent) {
+        toggleRegion("japanwest");
+        toggleButtonColor("japanwestButton");
+    };
+    function koreacentralButtonClickAction(zEvent) {
+        toggleRegion("koreacentral");
+        toggleButtonColor("koreacentralButton");
+    };
+    function southeastasiaButtonClickAction(zEvent) {
+        toggleRegion("southeastasia");
+        toggleButtonColor("southeastasiaButton");
+    };
+    function eastasiaButtonClickAction(zEvent) {
+        toggleRegion("eastasia");
+        toggleButtonColor("eastasiaButton");
+    };
+    function brazilsouthButtonClickAction(zEvent) {
+        toggleRegion("brazilsouth");
+        toggleButtonColor("brazilsouthButton");
+    };
+    function eastus2ButtonClickAction(zEvent) {
+        toggleRegion("eastus2");
+        toggleButtonColor("eastus2Button");
+    };
+    function eastusButtonClickAction(zEvent) {
+        toggleRegion("eastus");
+        toggleButtonColor("eastusButton");
+    };
+    function centralusButtonClickAction(zEvent) {
+        toggleRegion("centralus");
+        toggleButtonColor("centralusButton");
+    };
+    function northcentralusButtonClickAction(zEvent) {
+        toggleRegion("northcentralus");
+        toggleButtonColor("northcentralusButton");
+    };
+    function francecentralButtonClickAction(zEvent) {
+        toggleRegion("francecentral");
+        toggleButtonColor("francecentralButton");
+    };
+    function chinanorth2ButtonClickAction(zEvent) {
+        toggleRegion("chinanorth2");
+        toggleButtonColor("chinanorth2Button");
+    };
+    function chinaeast2ButtonClickAction(zEvent) {
+        toggleRegion("chinaeast2");
+        toggleButtonColor("chinaeast2Button");
+    };
+    function usgovvirginiaButtonClickAction(zEvent) {
+        toggleRegion("usgovvirginia");
+        toggleButtonColor("usgovvirginiaButton");
+    };
+    function usgovarizonaButtonClickAction(zEvent) {
+        toggleRegion("usgovarizona");
+        toggleButtonColor("usgovarizonaButton");
+    };
+
+    // component functions
+    function authButtonClickAction(zEvent) {
+        toggleComponent("auth");
+        toggleButtonColor("authButton");
+    }
+    function apiButtonClickAction(zEvent) {
+        toggleComponent("api");
+        toggleButtonColor("apiButton");
+    }
+    function computeButtonClickAction(zEvent) {
+        toggleComponent("compute");
+        toggleButtonColor("computeButton");
+    }
+    function jobsButtonClickAction(zEvent) {
+        toggleComponent("jobs");
+        toggleButtonColor("jobsButton");
+    }
+    function odbcButtonClickAction(zEvent) {
+        toggleComponent("odbc");
+        toggleButtonColor("odbcButton");
+    }
+    function webappButtonClickAction(zEvent) {
+        toggleComponent("webapp");
+        toggleButtonColor("webappButton");
+    }
+    function sqlButtonClickAction(zEvent) {
+        toggleComponent("sql");
+        toggleButtonColor("sqlButton");
+    }
+
+    // profile functions
+    function controlplanesButtonClickAction(zEvent) {
+        loadControlplanes();
+    };
+    function dataplanesButtonClickAction(zEvent) {
+        loadDataplanes();
+    };
+    function stagesButtonClickAction(zEvent) {
+        loadStages();
+    };
+    function shrinkButtonClickAction(zEvent) {
+        shrink();
+    }   //
     function loadDataplanes() {
-        var locationHTML = '<button id="canadaCentralButton" type="button">canadacentral</button><button id="canadaEastButton" type="button">canadaeast</button>' +
+        console.log("loading dataplanes profile")
-            '<button id="centralIndiaButton" type="button">centralindia</button><button id="southIndiaButton" type="button">southindia</button>' +
+        var dataplaneHTML = '<button id="canadacentralButton" type="button">canadacentral</button><button id="canadaeastButton" type="button">canadaeast</button>' +
-            '<button id="westIndiaButton" type="button">westindia</button><button id="switzerlandNorthButton" type="button">switzerlandnorth</button>' +
+            '<button id="centralindiaButton" type="button">centralindia</button><button id="southindiaButton" type="button">southindia</button>' +
-            '<button id="norwayEastButton" type="button">norwayeast</button></br></br>' +
+            '<button id="westindiaButton" type="button">westindia</button><button id="switzerlandnorthButton" type="button">switzerlandnorth</button>' +
-            '<button id="westUsButton" type="button">westus</button><button id="westUs2Button" type="button">westus2</button>' +
+            '<button id="norwayeastButton" type="button">norwayeast</button></br></br>' +
-            '<button id="southCentralUsButton" type="button">southcentralus</button></br></br>' +
+            '<button id="westusButton" type="button">westus</button><button id="westus2Button" type="button">westus2</button>' +
-            '<button id="westEuropeButton" type="button">westeurope</button><button id="northEuropeButton" type="button">northeurope</button>' +
+            '<button id="southcentralusButton" type="button">southcentralus</button></br></br>' +
-            '<button id="ukWestButton" type="button">ukwest</button><button id="ukSouthButton" type="button">uksouth</button>' +
+            '<button id="westeuropeButton" type="button">westeurope</button><button id="northeuropeButton" type="button">northeurope</button>' +
-            '<button id="southAfricaNorthButton" type="button">southafricanorth</button><button id="uaeNorthButton" type="button">uaenorth</button></br></br>' +
+            '<button id="ukwestButton" type="button">ukwest</button><button id="uksouthButton" type="button">uksouth</button>' +
-            '<button id="australiaEastButton" type="button">australiaeast</button><button id="australiaCentralButton" type="button">australiacentral</button>' +
+            '<button id="southafricanorthButton" type="button">southafricanorth</button><button id="uaenorthButton" type="button">uaenorth</button></br></br>' +
-            '<button id="australiaCentral2Button" type="button">australiacentral2</button><button id="australiaSoutheastButton" type="button">australiasoutheast</button>' +
+            '<button id="australiaeastButton" type="button">australiaeast</button><button id="australiacentralButton" type="button">australiacentral</button>' +
-            '<button id="japanEastButton" type="button">japaneast</button></br><button id="japanWestButton" type="button">japanwest</button>' +
+            '<button id="australiacentral2Button" type="button">australiacentral2</button><button id="australiasoutheastButton" type="button">australiasoutheast</button>' +
-            '<button id="koreaCentralButton" type="button">koreacentral</button><button id="southeastAsiaButton" type="button">southeastasia</button>' +
+            '<button id="japaneastButton" type="button">japaneast</button></br><button id="japanwestButton" type="button">japanwest</button>' +
-            '<button id="eastAsiaButton" type="button">eastasia</button></br></br>' +
+            '<button id="koreacentralButton" type="button">koreacentral</button><button id="southeastasiaButton" type="button">southeastasia</button>' +
-            '<button id="brazilSouthButton" type="button">brazilsouth</button><button id="eastUs2Button" type="button">eastus2</button>' +
+            '<button id="eastasiaButton" type="button">eastasia</button></br></br>' +
-            '<button id="eastUsButton" type="button">eastus</button><button id="centralUsButton" type="button">centralus</button>' +
+            '<button id="brazilsouthButton" type="button">brazilsouth</button><button id="eastus2Button" type="button">eastus2</button>' +
-            '<button id="northCentralUsButton" type="button">northcentralus</button><button id="franceCentralButton" type="button">francecentral</button></br></br>' +
+            '<button id="eastusButton" type="button">eastus</button><button id="centralusButton" type="button">centralus</button>' +
-            '<button id="chinaNorth2Button" type="button">chinanorth2</button><button id="chinaEast2Button" type="button">chinaeast2</button>' +
+            '<button id="northcentralusButton" type="button">northcentralus</button><button id="francecentralButton" type="button">francecentral</button></br></br>' +
-            '<button id="usGovVirginiaButton" type="button">usgovvirginia</button><button id="usGovArizonaButton" type="button">usgovarizona</button>';
+            '<button id="chinanorth2Button" type="button">chinanorth2</button><button id="chinaeast2Button" type="button">chinaeast2</button>' +
+            '<button id="usgovvirginiaButton" type="button">usgovvirginia</button><button id="usgovarizonaButton" type="button">usgovarizona</button>';
 
 
-        zNode.innerHTML = profilesHTML + '<hr class="solid">' + locationHTML + '<hr class="solid">' + componentsHTML + '<button id="applyButton" type="button">Apply Selection</button>';
+        zNode.innerHTML = profilesHTML + '<hr class="solid">' + dataplaneHTML + '<hr class="solid">' + componentsHTML +
+            '<button id="applyButton" type="button">Apply Selection</button><button id="resetButton" type="button">Reset Form</button>';
 
-        document.getElementById("canadaCentralButton").addEventListener("click", canadaCentralButtonClickAction, false);
+        // regional listeners
-        document.getElementById("canadaEastButton").addEventListener("click", canadaEastButtonClickAction, false);
+        document.getElementById("canadacentralButton").addEventListener("click", canadacentralButtonClickAction, false);
-        document.getElementById("centralIndiaButton").addEventListener("click", centralIndiaButtonClickAction, false);
+        document.getElementById("canadaeastButton").addEventListener("click", canadaeastButtonClickAction, false);
-        document.getElementById("southIndiaButton").addEventListener("click", southIndiaButtonClickAction, false);
+        document.getElementById("centralindiaButton").addEventListener("click", centralindiaButtonClickAction, false);
-        document.getElementById("westIndiaButton").addEventListener("click", westIndiaButtonClickAction, false);
+        document.getElementById("southindiaButton").addEventListener("click", southindiaButtonClickAction, false);
-        document.getElementById("switzerlandNorthButton").addEventListener("click", switzerlandNorthButtonClickAction, false);       
+        document.getElementById("westindiaButton").addEventListener("click", westindiaButtonClickAction, false);
-        document.getElementById("norwayEastButton").addEventListener("click", norwayEastButtonClickAction, false);
+        document.getElementById("switzerlandnorthButton").addEventListener("click", switzerlandnorthButtonClickAction, false);
-        document.getElementById("westUsButton").addEventListener("click", westUsButtonClickAction, false);
+        document.getElementById("norwayeastButton").addEventListener("click", norwayeastButtonClickAction, false);
-        document.getElementById("westUs2Button").addEventListener("click", westUs2ButtonClickAction, false);
+        document.getElementById("westusButton").addEventListener("click", westusButtonClickAction, false);
-        document.getElementById("southCentralUsButton").addEventListener("click", southCentralUsButtonClickAction, false); 
+        document.getElementById("westus2Button").addEventListener("click", westus2ButtonClickAction, false);
-        document.getElementById("westEuropeButton").addEventListener("click", westEuropeButtonClickAction, false);
+        document.getElementById("southcentralusButton").addEventListener("click", southcentralusButtonClickAction, false);
-        document.getElementById("northEuropeButton").addEventListener("click", northEuropeButtonClickAction, false);
+        document.getElementById("westeuropeButton").addEventListener("click", westeuropeButtonClickAction, false);
-        document.getElementById("ukWestButton").addEventListener("click", ukWestButtonClickAction, false);
+        document.getElementById("northeuropeButton").addEventListener("click", northeuropeButtonClickAction, false);
-        document.getElementById("ukSouthButton").addEventListener("click", ukSouthButtonClickAction, false);
+        document.getElementById("ukwestButton").addEventListener("click", ukwestButtonClickAction, false);
-        document.getElementById("southAfricaNorthButton").addEventListener("click", southAfricaNorthButtonClickAction, false);
+        document.getElementById("uksouthButton").addEventListener("click", uksouthButtonClickAction, false);
-        document.getElementById("uaeNorthButton").addEventListener("click", uaeNorthButtonClickAction, false);
+        document.getElementById("southafricanorthButton").addEventListener("click", southafricanorthButtonClickAction, false);
-        // document.getElementById("Button").addEventListener("click", ButtonClickAction, false);
+        document.getElementById("uaenorthButton").addEventListener("click", uaenorthButtonClickAction, false);
+        document.getElementById("australiaeastButton").addEventListener("click", australiaeastButtonClickAction, false);
+        document.getElementById("australiacentralButton").addEventListener("click", australiacentralButtonClickAction, false);
+        document.getElementById("australiacentral2Button").addEventListener("click", australiacentral2ButtonClickAction, false);
+        document.getElementById("australiasoutheastButton").addEventListener("click", australiasoutheastButtonClickAction, false);
+        document.getElementById("japaneastButton").addEventListener("click", japaneastButtonClickAction, false);
+        document.getElementById("japanwestButton").addEventListener("click", japanwestButtonClickAction, false);
+        document.getElementById("koreacentralButton").addEventListener("click", koreacentralButtonClickAction, false);
+        document.getElementById("southeastasiaButton").addEventListener("click", southeastasiaButtonClickAction, false);
+        document.getElementById("eastasiaButton").addEventListener("click", eastasiaButtonClickAction, false);
+        document.getElementById("brazilsouthButton").addEventListener("click", brazilsouthButtonClickAction, false);
+        document.getElementById("eastus2Button").addEventListener("click", eastus2ButtonClickAction, false);
+        document.getElementById("eastusButton").addEventListener("click", eastusButtonClickAction, false);
+        document.getElementById("centralusButton").addEventListener("click", centralusButtonClickAction, false);
+        document.getElementById("northcentralusButton").addEventListener("click", northcentralusButtonClickAction, false);
+        document.getElementById("francecentralButton").addEventListener("click", francecentralButtonClickAction, false);
+        document.getElementById("chinanorth2Button").addEventListener("click", chinanorth2ButtonClickAction, false);
+        document.getElementById("chinaeast2Button").addEventListener("click", chinaeast2ButtonClickAction, false);
+        document.getElementById("usgovvirginiaButton").addEventListener("click", usgovvirginiaButtonClickAction, false);
+        document.getElementById("usgovarizonaButton").addEventListener("click", usgovarizonaButtonClickAction, false);
+
+        // profile listeners
+        document.getElementById("controlplanesButton").addEventListener("click", controlplanesButtonClickAction, false);
+        document.getElementById("dataplanesButton").addEventListener("click", dataplanesButtonClickAction, false);
+        document.getElementById("stagesButton").addEventListener("click", stagesButtonClickAction, false);
+        document.getElementById("shrinkButton").addEventListener("click", shrinkButtonClickAction, false);
+
+        // component listeners
+        document.getElementById("apiButton").addEventListener("click", apiButtonClickAction, false);
+        document.getElementById("authButton").addEventListener("click", authButtonClickAction, false);
+        document.getElementById("computeButton").addEventListener("click", computeButtonClickAction, false);
+        document.getElementById("jobsButton").addEventListener("click", jobsButtonClickAction, false);
+        document.getElementById("odbcButton").addEventListener("click", odbcButtonClickAction, false);
+        document.getElementById("webappButton").addEventListener("click", webappButtonClickAction, false);
+        document.getElementById("sqlButton").addEventListener("click", sqlButtonClickAction, false);
+        document.getElementById("allComponentsButton").addEventListener("click", allComponentsButtonClickAction, false);
+
+        // aux listeners
+        document.getElementById("resetButton").addEventListener("click", resetButtonClickAction, false);
+        document.getElementById("applyButton").addEventListener("click", applyButtonClickAction, false);
     };
-    loadDataplanes();
+    function loadControlplanes() {
+        console.log("loading controlplanes");
+        var controlplaneHTML = '<button id="canadacentralButton" type="button">canadacentral</button><button id="centralindiaButton" type="button">centralindia</button>' +
+            '<button id="switzerlandnorthButton" type="button">switzerlandnorth</button><button id="norwayeastButton" type="button">norwayeast</button></br></br>' +
+            '<button id="westusButton" type="button">westus</button></br></br>' +
+            '<button id="westeuropeButton" type="button">westeurope</button><button id="ukwestButton" type="button">ukwest</button>' +
+            '<button id="southafricanorthButton" type="button">southafricanorth</button><button id="uaenorthButton" type="button">uaenorth</button></br></br>' +
+            '<button id="australiaeastButton" type="button">australiaeast</button><button id="japaneastButton" type="button">japaneast</button>' +
+            '<button id="koreacentralButton" type="button">koreacentral</button><button id="southeastasiaButton" type="button">southeastasia</button></br></br>' +
+            '<button id="brazilsouthButton" type="button">brazilsouth</button><button id="eastus2Button" type="button">eastus2</button>' +
+            '<button id="francecentralButton" type="button">francecentral</button></br></br>' +
+            '<button id="chinanorth2Button" type="button">chinanorth2</button><button id="chinaeast2Button" type="button">chinaeast2</button>' +
+            '<button id="usgovvirginiaButton" type="button">usgovvirginia</button><button id="usgovarizonaButton" type="button">usgovarizona</button>';
+        zNode.innerHTML = profilesHTML + '<hr class="solid">' + controlplaneHTML + '<hr class="solid">' + componentsHTML + '<button id="applyButton" type="button">Apply Selection</button><button id="resetButton" type="button">Reset Form</button>';
+
+        // regional listeners
+        document.getElementById("canadacentralButton").addEventListener("click", canadacentralCPButtonClickAction, false);
+        document.getElementById("switzerlandnorthButton").addEventListener("click", switzerlandnorthButtonClickAction, false);
+        document.getElementById("norwayeastButton").addEventListener("click", norwayeastButtonClickAction, false);
+        document.getElementById("centralindiaButton").addEventListener("click", centralindiaCPButtonClickAction, false);
+        document.getElementById("westusButton").addEventListener("click", westusCPButtonClickAction, false);
+        document.getElementById("westeuropeButton").addEventListener("click", westeuropeCPButtonClickAction, false);
+        document.getElementById("ukwestButton").addEventListener("click", ukwestCPButtonClickAction, false);
+        document.getElementById("southafricanorthButton").addEventListener("click", southafricanorthButtonClickAction, false);
+        document.getElementById("uaenorthButton").addEventListener("click", uaenorthButtonClickAction, false);
+        document.getElementById("australiaeastButton").addEventListener("click", australiaeastCPButtonClickAction, false);
+        document.getElementById("japaneastButton").addEventListener("click", japaneastCPButtonClickAction, false);
+        // profile listeners
+        document.getElementById("controlplanesButton").addEventListener("click", controlplanesButtonClickAction, false);
+        document.getElementById("dataplanesButton").addEventListener("click", dataplanesButtonClickAction, false);
+        document.getElementById("stagesButton").addEventListener("click", stagesButtonClickAction, false);
+        document.getElementById("shrinkButton").addEventListener("click", shrinkButtonClickAction, false);
+
+        // component listeners
+        document.getElementById("apiButton").addEventListener("click", apiButtonClickAction, false);
+        document.getElementById("authButton").addEventListener("click", authButtonClickAction, false);
+        document.getElementById("computeButton").addEventListener("click", computeButtonClickAction, false);
+        document.getElementById("jobsButton").addEventListener("click", jobsButtonClickAction, false);
+        document.getElementById("odbcButton").addEventListener("click", odbcButtonClickAction, false);
+        document.getElementById("webappButton").addEventListener("click", webappButtonClickAction, false);
+        document.getElementById("sqlButton").addEventListener("click", sqlButtonClickAction, false);
+        document.getElementById("allComponentsButton").addEventListener("click", allComponentsButtonClickAction, false);
+
+        // aux listeners
+        document.getElementById("resetButton").addEventListener("click", resetButtonClickAction, false);
+        document.getElementById("applyButton").addEventListener("click", applyButtonClickAction, false);
+    };
+    function loadStages() {
+        console.log("loading stages");
+        var stagesHTML = '<button id="stage1Button" type="button">Stage-1</button><button id="stage1.5Button" type="button">Stage-1.5</button>' +
+            '<button id="stage2Button" type="button">Stage-2</button><button id="stage3amButton" type="button">Stage-3AM</button>' +
+            '<button id="stage3pmButton" type="button">Stage-3PM</button><button id="govcloudButton" type="button">Govcloud</button>' +
+            '<button id="mooncakeButton" type="button">Mooncake</button>';
+
+        zNode.innerHTML = profilesHTML + '<hr class="solid">' + stagesHTML + '<hr class="solid">' + componentsHTML + '<button id="applyButton" type="button">Apply Selection</button><button id="resetButton" type="button">Reset Form</button>';
+        document.getElementById("controlplanesButton").addEventListener("click", controlplanesButtonClickAction, false);
+        document.getElementById("dataplanesButton").addEventListener("click", dataplanesButtonClickAction, false);
+        document.getElementById("stagesButton").addEventListener("click", stagesButtonClickAction, false);
+        document.getElementById("shrinkButton").addEventListener("click", shrinkButtonClickAction, false);
+    };
+    function shrink() {
+        var profilesHTML = '<center><button id="controlplanesButton" type="button">Controlplanes</button>   ' +
+            '<button id="stagesButton" type="button">Stages</button>   <button id="dataplanesButton" type="button">' +
+            'Dataplanes</button>   <button id="shrinkButton" type="button">Shrink</button></center>';
+        zNode.innerHTML = profilesHTML + '<hr class="solid"><button id="applyButton" type="button">Apply Selection</button><button id="resetButton" type="button">Reset Form</button>';
+        document.getElementById("controlplanesButton").addEventListener("click", controlplanesButtonClickAction, false);
+        document.getElementById("dataplanesButton").addEventListener("click", dataplanesButtonClickAction, false);
+        document.getElementById("stagesButton").addEventListener("click", stagesButtonClickAction, false);
+        document.getElementById("shrinkButton").addEventListener("click", shrinkButtonClickAction, false);
+    }
 }
 
 if (window.location.href.indexOf("5cf02dde58a00904bda41926") > -1) {
@@ -178,61 +447,38 @@ if (window.location.href.indexOf("5cf02dde58a00904bda41926") > -1) {
 
 if (window.location.href.indexOf("60087ab5608daf0535dc8e23") > -1) {
 }
-// setup some variables
-var apiGroup = $("div.form-group").filter(":contains('API Service')");
-var authGroup = $("div.form-group").filter(":contains('Authentication')");
-var computeGroup = $("div.form-group").filter(":contains('Compute Service')");
-var jobsGroup = $("div.form-group").filter(":contains('Jobs Service')");
-var odbcGroup = $("div.form-group").filter(":contains('ODBC/JDBC Service')");
-var webappGroup = $("div.form-group").filter(":contains('User Interface')");
-var sqlGroup = $("div.form-group").filter(":contains('Databricks SQL')");
 
-// component buttons
-
-function authButtonClickAction(zEvent) {
-    toggleComponent("auth");
-    toggleButtonColor("authButton");
-}
-function apiButtonClickAction(zEvent) {
-    toggleComponent("api");
-    toggleButtonColor("apiButton");
-}
-function computeButtonClickAction(zEvent) {
-    toggleComponent("compute");
-    toggleButtonColor("computeButton");
-}
-function jobsButtonClickAction(zEvent) {
-    toggleComponent("jobs");
-    toggleButtonColor("jobsButton");
-}
-function odbcButtonClickAction(zEvent) {
-    toggleComponent("odbc");
-    toggleButtonColor("odbcButton");
-}
-function webappButtonClickAction(zEvent) {
-    toggleComponent("webapp");
-    toggleButtonColor("webappButton");
-}
-function sqlButtonClickAction(zEvent) {
-    toggleComponent("sql");
-    toggleButtonColor("sqlButton");
-}
-document.getElementById("apiButton").addEventListener("click", apiButtonClickAction, false);
-document.getElementById("authButton").addEventListener("click", authButtonClickAction, false);
-document.getElementById("computeButton").addEventListener("click", computeButtonClickAction, false);
-document.getElementById("jobsButton").addEventListener("click", jobsButtonClickAction, false);
-document.getElementById("odbcButton").addEventListener("click", odbcButtonClickAction, false);
-document.getElementById("webappButton").addEventListener("click", webappButtonClickAction, false);
-document.getElementById("sqlButton").addEventListener("click", sqlButtonClickAction, false);
-document.getElementById("allComponentsButton").addEventListener("click", allComponentsButtonClickAction, false);
-
-
-// aux buttons
-document.getElementById("applyButton").addEventListener("click", applyButtonClickAction, false);
 // aux functions
 function applyButtonClickAction(zEvent) {
     apply();
 }
+function allComponentsButtonClickAction(zEvent) {
+    var enabledCount = 0
+    for (i = 0; i < componentArray.length; i++) {
+        var component = componentArray[i];
+        if (checkComponent(component) == true) {
+            enabledCount++;
+        }
+    }
+    if (enabledCount == componentArray.length) {
+        for (i = 0; i < componentArray.length; i++) {
+            var component = componentArray[i];
+            var buttonName = component + "Button";
+            deselectComponent(component);
+            clearButtonColor(buttonName);
+        }
+    } else {
+        for (i = 0; i < componentArray.length; i++) {
+            var component = componentArray[i];
+            var buttonName = component + "Button";
+            selectComponent(component);
+            setButtonColor(buttonName);
+        }
+    }
+}
+function resetButtonClickAction(zEvent) {
+    reset();
+}
 function toggleComponent(component) {
     if (checkComponent(component) == false) {
         selectComponent(component);
@@ -298,14 +544,9 @@ function apply() {
             var region = regionArray[j];
             var groupName = component + "Group";
             var group = eval(groupName);
-            var checkboxStr = `group.find('*').filter(\":contains('${region}')\").filter("div.clearfix.prettycheckbox.labelright.blue").children().filter("A")[0]`;
+            var checkboxStr = `group.find('*').filter(\":contains(' ${region}:')\").filter("div.clearfix.prettycheckbox.labelright.blue").children().filter("A")[0]`;
             var checkbox = eval(checkboxStr);
             if (checkRegion(region) == true && checkComponent(component) == true) {
-                console.log(region);
-                console.log(component);
-                console.log(groupName);
-                console.log(group);
-                console.log(checkbox);
                 selectCheckbox(checkbox);
             } else {
                 deselectCheckbox(checkbox);
@@ -313,63 +554,18 @@ function apply() {
         }
     }
 }
-function allComponentsButtonClickAction(zEvent) {
+function reset() {
-    var enabledCount = 0
     for (i = 0; i < componentArray.length; i++) {
         var component = componentArray[i];
-        if (checkComponent(component) == true) {
+        deselectComponent(component);
-            enabledCount++;
+        var buttonName = component + 'Button';
-        }
+        clearButtonColor(buttonName);
     }
-    if (enabledCount == componentArray.length) {
+    for (i = 0; i < regionArray.length; i++) {
-        for (i = 0; i < componentArray.length; i++) {
+        var region = regionArray[i];
-            var component = componentArray[i];
+        deselectRegion(region);
-            var buttonName = component + "Button";
+        var buttonName = region + 'Button';
-            deselectComponent(component);
+        clearButtonColor(buttonName);
-            clearButtonColor(buttonName);
-        }
-    } else {
-        for (i = 0; i < componentArray.length; i++) {
-            var component = componentArray[i];
-            var buttonName = component + "Button";
-            selectComponent(component);
-            setButtonColor(buttonName);
-        }
     }
+    apply();
 }
-function multilineStr(dummyFunc) {
-    var str = dummyFunc.toString();
-    str = str.replace(/^[^\/]+\/\*!?/, '') // Strip function () { /*!
-        .replace(/\s*\*\/\s*\}\s*$/, '') // Strip */ }
-        .replace(/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
-    ;
-    return str;
-}
-// frame CSS style
-GM_addStyle(multilineStr(function() {
-    /*!
-         #myContainer {
-             position:               fixed;
-             bottom:                    0;
-             right:                   0;
-             font-size:              14px;
-             background:             orange;
-             border:                 3px outset black;
-             margin:                 3px;
-             opacity:                0.7;
-             z-index:                222;
-             padding:                5px 5px;
-         }
-         #myButton {
-             cursor:                 pointer;
-         }
-         #myContainer p {
-             color:                  red;
-             background:             white;
-         }
-         hr.solid {
-            border-top: 3px solid #bbb;
-        }
-     */
-}));
-