starting on aws

statusio-selector.js

@@ -16,6 +16,8 @@ var zNode = document.createElement('div');
 zNode.setAttribute('id', 'myContainer');
 document.body.appendChild(zNode);
 
+var auxHTML = '<center><button id="applyButton" type="button">Apply Selection</button><button id="resetButton" type="button">Reset Form</button><center>';
+
 if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
     // render initial HTML
     var profilesHTML = '<center><button id="controlplanesButton" type="button">Controlplanes</button>   ' +
@@ -41,10 +43,10 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
     var selectedRegions = new Map();
     for (i = 0; i < componentArray.length; i++) {
         selectedComponents.set(componentArray[i], false);
-    }
+    };
     for (i = 0; i < regionArray.length; i++) {
-        selectedRegions.set(regionArray[i], false)
+        selectedRegions.set(regionArray[i], false);
-    }
+    };
 
     // init component div groups
     var apiGroup = $("div.form-group").filter(":contains('API Service')");
@@ -56,10 +58,10 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
     var sqlGroup = $("div.form-group").filter(":contains('Databricks SQL')");
 
     // write component HTML template
-    var componentsHTML = '<button id="allComponentsButton" type="button">AllComponents</button> <button id="apiButton" type="button">API</button>' +
+    var componentsHTML = '<center><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>';
+        '<button id="sqlButton" type="button">SQL</button></center></br></br>';
 
     // regional functions
     function canadaeastButtonClickAction(zEvent) {
@@ -74,7 +76,7 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
         toggleRegion("canadacentral");
         toggleRegion("canadaeast");
         toggleButtonColor("canadacentralButton");
-    }
+    };
     function centralindiaButtonClickAction(zEvent) {
         toggleRegion("centralindia");
         toggleButtonColor("centralindiaButton");
@@ -140,7 +142,7 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
         toggleRegion("ukwest");
         toggleRegion("uksouth");
         toggleButtonColor("ukwestButton");
-    }
+    };
     function uksouthButtonClickAction(zEvent) {
         toggleRegion("uksouth");
         toggleButtonColor("uksouthButton");
@@ -163,7 +165,7 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
         toggleRegion("australiacentral2");
         toggleRegion("australiasoutheast");
         toggleButtonColor("australiaeastButton");
-    }
+    };
     function australiacentralButtonClickAction(zEvent) {
         toggleRegion("australiacentral");
         toggleButtonColor("australiacentralButton");
@@ -184,7 +186,7 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
         toggleRegion("japaneast");
         toggleRegion("japanwest");
         toggleButtonColor("japaneastButton");
-    }
+    };
     function japanwestButtonClickAction(zEvent) {
         toggleRegion("japanwest");
         toggleButtonColor("japanwestButton");
@@ -201,7 +203,7 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
         toggleRegion("southeastasia");
         toggleRegion("eastasia");
         toggleButtonColor("southeastasiaButton");
-    }
+    };
     function eastasiaButtonClickAction(zEvent) {
         toggleRegion("eastasia");
         toggleButtonColor("eastasiaButton");
@@ -220,7 +222,7 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
         toggleRegion("centralus");
         toggleRegion("northcentralus");
         toggleButtonColor("eastus2Button");
-    }
+    };
     function eastusButtonClickAction(zEvent) {
         toggleRegion("eastus");
         toggleButtonColor("eastusButton");
@@ -314,52 +316,40 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
     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) {
+    // profile management functions
-        loadControlplanes();
-    };
-    function dataplanesButtonClickAction(zEvent) {
-        loadDataplanes();
-    };
-    function stagesButtonClickAction(zEvent) {
-        loadStages();
-    };
-    function shrinkButtonClickAction(zEvent) {
-        shrink();
-    }   //
     function loadDataplanes() {
-        console.log("loading dataplanes profile")
+        console.log("Loading Azure dataplanes profile");
         var dataplaneHTML = '<center><button id="canadacentralButton" style="width:234px" type="button">Canada Central</button><button id="canadaeastButton" style="width:234px" type="button">Canada East</button></br><button id="centralindiaButton" style="width:156px" type="button">Central India</button><button id="southindiaButton" style="width:156px" type="button">South India</button><button id="westindiaButton" style="width:156px" type="button">West India</button></br><button id="switzerlandnorthButton" style="width:234px" type="button">Switzerland North</button><button id="norwayeastButton" style="width:234px" type="button">Norway East</button></br></br><button id="westusButton" style="width:156px" type="button">West US</button><button id="westus2Button" style="width:156px" type="button">West US 2</button><button id="southcentralusButton" style="width:156px" type="button">South Central US</button></br></br><button id="westeuropeButton" style="width:117px" type="button">West Europe</button><button id="northeuropeButton" style="width:117px" type="button">North Europe</button><button id="ukwestButton" style="width:117px" type="button">UK West</button><button id="uksouthButton" style="width:117px" type="button">UK South</button><br><button id="southafricanorthButton" style="width:234px" type="button">South Africa North</button><button id="uaenorthButton" style="width:234px" type="button">UAE North</button></br></br><button id="australiaeastButton" style="width:156px" type="button">Australia East</button><button id="australiacentralButton" style="width:156px" type="button">Australia Central</button><button id="australiacentral2Button" style="width:156px" type="button">Australia Central 2</button></br><button id="australiasoutheastButton" style="width:138px" type="button">Australia Southeast</button><button id="japaneastButton" style="width:110px" type="button">Japan East</button><button id="japanwestButton" style="width:110px" type="button">Japan West</button><button id="koreacentralButton" style="width:110px" type="button">Korea Central</button></br><button id="southeastasiaButton" style="width:234px" type="button">Southeast Asia</button><button id="eastasiaButton" style="width:234px" type="button">East Asia</button></br></br><button id="brazilsouthButton" style="width:156px" type="button">Brazil South</button><button id="eastus2Button" style="width:156px" type="button">East US 2</button><button id="eastusButton" style="width:156px" type="button">East US</button></br><button id="centralusButton" style="width:156px" type="button">Central US</button><button id="northcentralusButton" style="width:156px" type="button">North Central US</button><button id="francecentralButton" style="width:156px" type="button">France Central</button></br></br><button id="chinanorth2Button" style="width:117px" type="button">China North 2</button><button id="chinaeast2Button" style="width:117px" type="button">China East 2</button><button id="usgovvirginiaButton" style="width:117px" type="button">US Gov Virginia</button><button id="usgovarizonaButton" style="width:117px" type="button">US Gov Arizona</button></center>';
 
-
         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>';
+            auxHTML;
 
         // array of active buttons
         buttonArray = ["canadacentral", "canadaeast", "centralindia", "southindia", "westindia",
@@ -429,19 +419,9 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
         document.getElementById("applyButton").addEventListener("click", applyButtonClickAction, false);
     };
     function loadControlplanes() {
-        console.log("loading controlplanes");
+        console.log("Loading Azure controlplanes profile");
-        var controlplaneHTML = '<button id="canadacentralButton" type="button">Canada Central</button><button id="centralindiaButton" type="button">Central India</button>' +
+        var controlplaneHTML = '<center><button id="canadacentralButton" style="width:234px" type="button">Canada Central</button><button id="centralindiaButton" style="width:234px" type="button">Central India</button></br><button id="switzerlandnorthButton" style="width:234px" type="button">Switzerland North</button><button id="norwayeastButton" style="width:234px" type="button">Norway East</button></br></br><button id="westusButton" style="width:468px" type="button">West US</button></br></br><button id="westeuropeButton" style="width:234px" type="button">West Europe</button><button id="ukwestButton" style="width:234px" type="button">UK West</button></br><button id="southafricanorthButton" style="width:234px" type="button">South Africa North</button><button id="uaenorthButton" style="width:234px" type="button">UAE North</button></br></br><button id="australiaeastButton" style="width:117px" type="button">Australia East</button><button id="japaneastButton" style="width:117px" type="button">Japan East</button><button id="koreacentralButton" style="width:117px" type="button">Korea Central</button><button id="southeastasiaButton" style="width:117px" type="button">Southeast Asia</button></br></br><button id="brazilsouthButton" style="width:156px" type="button">Brazil South</button><button id="eastus2Button" style="width:156px" type="button">East US 2</button><button id="francecentralButton" style="width:156px" type="button">France Central</button></br></br><button id="chinanorth2Button" style="width:117px" type="button">China North 2</button><button id="chinaeast2Button" style="width:117px" type="button">China East 2</button><button id="usgovvirginiaButton" style="width:117px" type="button">US Gov Virginia</button><button id="usgovarizonaButton" style="width:117px" type="button">US Gov Arizona</button></center>';
-            '<button id="switzerlandnorthButton" type="button">Switzerland North</button><button id="norwayeastButton" type="button">Norway East</button></br></br>' +
+        zNode.innerHTML = profilesHTML + '<hr class="solid">' + controlplaneHTML + '<hr class="solid">' + componentsHTML + auxHTML;
-            '<button id="westusButton" type="button">West US</button></br></br>' +
-            '<button id="westeuropeButton" type="button">West Europe</button><button id="ukwestButton" type="button">UK West</button>' +
-            '<button id="southafricanorthButton" type="button">South Africa North</button><button id="uaenorthButton" type="button">UAE North</button></br></br>' +
-            '<button id="australiaeastButton" type="button">Australia East</button><button id="japaneastButton" type="button">Japan East</button>' +
-            '<button id="koreacentralButton" type="button">Korea Central</button><button id="southeastasiaButton" type="button">Southeast Asia</button></br></br>' +
-            '<button id="brazilsouthButton" type="button">Brazil South</button><button id="eastus2Button" type="button">East US 2</button>' +
-            '<button id="francecentralButton" type="button">France Central</button></br></br>' +
-            '<button id="chinanorth2Button" type="button">China North 2</button><button id="chinaeast2Button" type="button">China East 2</button>' +
-            '<button id="usgovvirginiaButton" type="button">US Gov Virginia</button><button id="usgovarizonaButton" type="button">US Gov Arizona</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>';
 
         // array of active buttons
         buttonArray = ["canadacentral", "centralindia", "switzerlandnorth", "norwayeast", "westus", "westeurope","ukwest", "southafricanorth",
@@ -494,16 +474,13 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
         document.getElementById("applyButton").addEventListener("click", applyButtonClickAction, false);
     };
     function loadStages() {
-        console.log("loading stages");
+        console.log("Loading Azure stages profile");
-        var stagesHTML = '<button id="stage1Button" type="button">Stage-1</button><button id="stage1point5Button" type="button">Stage-1.5</button>' +
+        var stagesHTML = '<center><button id="stage1Button" style="width:94px" type="button">Stage-1</button><button id="stage1point5Button" style="width:94px" type="button">Stage-1.5</button><button id="stage2Button" style="width:92px" type="button">Stage-2</button><button id="stage3amButton" style="width:94px" type="button">Stage-3AM</button><button id="stage3pmButton" style="width:94px" type="button">Stage-3PM</button></br><button id="stagegovcloudButton" style="width:234px" type="button">Govcloud</button><button id="stagemooncakeButton" style="width:234px" type="button">Mooncake</button></center>';
-            '<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="stagegovcloudButton" type="button">Govcloud</button>' +
-            '<button id="stagemooncakeButton" 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>';
+        zNode.innerHTML = profilesHTML + '<hr class="solid">' + stagesHTML + '<hr class="solid">' + componentsHTML + auxHTML;
 
         // array of active buttons
-        buttonArray = ["stage1", "stage1.5", "stage2", "stage3am", "stage3pm", "govcloud", "mooncake"];
+        buttonArray = ["stage1", "stage1point5", "stage2", "stage3am", "stage3pm", "stagegovcloud", "stagemooncake"];
         reset();
 
         // regional listeners
@@ -536,13 +513,13 @@ if (window.location.href.indexOf("5d49ec10226b9e13cb6a422e") > -1) {
         document.getElementById("applyButton").addEventListener("click", applyButtonClickAction, false);
     };
     function shrink() {
-        zNode.innerHTML = profilesHTML + '<hr class="solid"><button id="applyButton" type="button">Apply Selection</button><button id="resetButton" type="button">Reset Form</button>';
+        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);
-    }
+    };
-}
+};
 
 if (window.location.href.indexOf("5cf02dde58a00904bda41926") > -1) {
     // render initial HTML
@@ -550,7 +527,165 @@ if (window.location.href.indexOf("5cf02dde58a00904bda41926") > -1) {
         '<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 = ["us-west-1", "us-west-2", "us-east-1", "us-east-2", "sa-east-1", "eu-west-1", "eu-west-2", "eu-central-1",
+                       "ap-south-1", "ap-southeast-1", "ap-southeast-2", "ap-northeast-1", "ap-northeast-2", "ca-central-1"];
+    var buttonArray = [];
+
+    // create tracking maps
+    var selectedComponents = new Map();
+    var selectedRegions = new Map();
+    for (i = 0; i < componentArray.length; i++) {
+        selectedComponents.set(componentArray[i], false);
+    };
+    for (i = 0; i < regionArray.length; i++) {
+        selectedRegions.set(regionArray[i], false);
+    };
+
+    // init component div groups
+    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')");
+
+    // write component HTML template
+    var componentsHTML = '<center><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></center></br></br>';
+
+    // regional functions
+    function uswest1ButtonClickAction(zEvent) {
+        toggleRegion("us-west-1");
+        toggleButtonColor("uswest1Button");
+    };
+    function canadacentralCPButtonClickAction(zEvent) {
+        toggleRegion("canadacentral");
+        toggleRegion("canadaeast");
+        toggleButtonColor("canadacentralButton");
+    };
+
+    // profile management functions
+    function loadDataplanes() {
+        console.log("Loading AWS dataplanes profile");
+        var dataplaneHTML = '<center><button id="ceButton" style="width:117px" type="button">CE</button><button id="cacentral1Button" style="width:117px" type="button">ca-central-1</button><button id="eucentral1Button" style="width:117px" type="button">eu-central-1</button><button id="euwest2Button" style="width:117px" type="button">eu-west-2</button></br></br><button id="uswest2Button" style="width:234px" type="button">us-west-2</button><button id="uswest1Button" style="width:234px" type="button">us-west-1</button></br><button id="useast1Button" style="width:234px" type="button">us-east-1</button><button id="useast2Button" style="width:234px" type="button">us-east-2</button></br></br><button id="apsouth1Button" style="width:156px" type="button">ap-south-1</button><button id="apsoutheast2Button" style="width:156px" type="button">ap-southeast-2</button><button id="apnortheast1Button" style="width:156px" type="button">ap-northeast-1</button></br></br><button id="euwest1Button" style="width:468px" type="button">eu-west-1</button></center>';
+
+        zNode.innerHTML = profilesHTML + '<hr class="solid">' + dataplaneHTML + '<hr class="solid">' + componentsHTML +
+            auxHTML;
+
+        // array of active buttons
+        buttonArray = ["CE", "ca-central-1", "eu-central-1", "eu-west-2", "us-west-2", "us-east-1", "us-east-2", "ap-south-1",
+                      "ap-southeast-2", "ap-northeast-1", "eu-west-1"];
+        //reset();
+        // regional listeners
+        document.getElementById("uswest1Button").addEventListener("click", uswest1ButtonClickAction, 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 loadControlplanes() {
+        console.log("Loading Azure controlplanes profile");
+        var controlplaneHTML = '<center><button id="ceButton" style="width:117px" type="button">CE</button><button id="cacentral1Button" style="width:117px" type="button">ca-central-1</button><button id="eucentral1Button" style="width:117px" type="button">eu-central-1</button><button id="euwest2Button" style="width:117px" type="button">eu-west-2</button></br></br><button id="uswest2Button" style="width:156px" type="button">us-west-2</button><button id="useast1Button" style="width:156px" type="button">us-east-1</button><button id="useast2Button" style="width:156px" type="button">us-east-2</button></br></br><button id="apsouth1Button" style="width:156px" type="button">ap-south-1</button><button id="apsoutheast2Button" style="width:156px" type="button">ap-southeast-2</button><button id="apnortheast1Button" style="width:156px" type="button">ap-northeast-1</button></br></br><button id="euwest1Button" style="width:468px" type="button">eu-west-1</button></center>';
+        zNode.innerHTML = profilesHTML + '<hr class="solid">' + controlplaneHTML + '<hr class="solid">' + componentsHTML + auxHTML;
+
+        // array of active buttons
+        buttonArray = ["canadacentral", "centralindia", "switzerlandnorth", "norwayeast", "westus", "westeurope","ukwest", "southafricanorth",
+                       "uaenorth", "australiaeast", "japaneast", "koreacentral", "southeastasia", "brazilsouth", "eastus2", "francecentral",
+                       "chinanorth2", "chinaeast2", "usgovvirginia", "usgovarizona"];
+
+        // clear everything on profile load
+        //reset();
+
+        // regional listeners
+        // document.getElementById("canadacentralButton").addEventListener("click", canadacentralCPButtonClickAction, 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 Azure stages profile");
+        var stagesHTML = '<center><button id="stage1Button" style="width:117px" type="button">Stage-1</button><button id="stage2Button" style="width:117px" type="button">Stage-2</button><button id="stage3amButton" style="width:117px" type="button">Stage-3 AM</button><button id="stage3pmButton" style="width:117px" type="button">Stage-3 PM</button></center>';
+
+        zNode.innerHTML = profilesHTML + '<hr class="solid">' + stagesHTML + '<hr class="solid">' + componentsHTML + auxHTML;
+
+        // array of active buttons
+        buttonArray = ["stage1", "stage1point5", "stage2", "stage3am", "stage3pm", "stagegovcloud", "stagemooncake"];
+        // reset();
+
+        // regional listeners
+        //document.getElementById("stage1Button").addEventListener("click", stage1ButtonClickAction, 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 shrink() {
+        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);
+    };
+};
 
 if (window.location.href.indexOf("60087ab5608daf0535dc8e23") > -1) {
     // render initial HTML
@@ -558,13 +693,28 @@ if (window.location.href.indexOf("60087ab5608daf0535dc8e23") > -1) {
         '<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;
-}
+
+};
+
+// profile functions
+function controlplanesButtonClickAction(zEvent) {
+    loadControlplanes();
+};
+function dataplanesButtonClickAction(zEvent) {
+    loadDataplanes();
+};
+function stagesButtonClickAction(zEvent) {
+    loadStages();
+};
+function shrinkButtonClickAction(zEvent) {
+    shrink();
+};
 
 // aux functions
 function applyButtonClickAction(zEvent) {
     apply();
-}
+};
-function allComponentsButtonClickAction(zEvent) {
+function allComponentsButtonClickAction(zEvent) {$
     var enabledCount = 0
     for (i = 0; i < componentArray.length; i++) {
         var component = componentArray[i];
@@ -587,17 +737,17 @@ function allComponentsButtonClickAction(zEvent) {
             setButtonColor(buttonName);
         }
     }
-}
+};
 function resetButtonClickAction(zEvent) {
     reset();
-}
+};
 function toggleComponent(component) {
     if (checkComponent(component) == false) {
         selectComponent(component);
     } else {
         deselectComponent(component);
     }
-}
+};
 function toggleButtonColor(buttonName) {
     var bg = document.getElementById(buttonName).style.background;
     if(bg != '') {
@@ -605,50 +755,50 @@ function toggleButtonColor(buttonName) {
     } else {
         setButtonColor(buttonName);
     }
-}
+};
 function checkComponent(component) {
     var status = selectedComponents.get(component);
     return status;
-}
+};
 function checkRegion(region) {
     var status = selectedRegions.get(region)
     return status;
-}
+};
 function selectComponent(component) {
     selectedComponents.set(component, true);
     console.log(selectedComponents);
-}
+};
 function deselectComponent(component) {
     selectedComponents.set(component, false);
     console.log(selectedComponents);
-}
+};
 function toggleRegion(region) {
     if (checkRegion(region) == false) {
         selectRegion(region);
     } else {
         deselectRegion(region);
     }
-}
+};
 function selectRegion(region) {
     selectedRegions.set(region, true);
     console.log(selectedRegions);
-}
+};
 function deselectRegion(region) {
     selectedRegions.set(region, false);
     console.log(selectedRegions);
-}
+};
 function setButtonColor(buttonName) {
     document.getElementById(buttonName).style.background = '#00FF00';
-}
+};
 function clearButtonColor(buttonName) {
     document.getElementById(buttonName).style.background = '';
-}
+};
 function selectCheckbox(box) {
     box.setAttribute("class", "checked");
-}
+};
 function deselectCheckbox(box) {
     box.setAttribute("class", "");
-}
+};
 function apply() {
     for (i = 0; i < componentArray.length; i++) {
         var component = componentArray[i];
@@ -665,22 +815,22 @@ function apply() {
             }
         }
     }
-}
+};
-function reset() {
+function reset(buttons) {
     for (i = 0; i < componentArray.length; i++) {
         var component = componentArray[i];
         deselectComponent(component);
         var buttonName = component + 'Button';
         clearButtonColor(buttonName);
-    }
+    };
     for (i = 0; i < buttonArray.length; i++) {
         var region = buttonArray[i];
         var buttonName = region + 'Button';
         clearButtonColor(buttonName);
-    }
+    };
     for (i = 0; i < regionArray.length; i++) {
         var  region = regionArray[i];
         deselectRegion(region);
-    }
+    };
     apply();
-}
+};