// ==UserScript==
// @name        Status.io Selector 2
// @namespace   https://status.io
// @description Effort to simplify configuration of incidents/maintenance windows
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// @require     http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// @grant       GM_setClipboard
// @version     0.0.1
// ==/UserScript==

// 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 componentArray = ["api", "auth", "compute", "jobs", "odbc", "webapp"];
var selectedComponents = new Map();
var i;
for (i = 0; i < componentArray.length; i++) {
    selectedComponents.set(componentArray[i], 0);
}


for (i = 0; i < componentArray.length; i++) {
    var component = componentArray[i];
    if (selectedComponents.get(component) == 0){
        var groupName = component + "Group";
        console.log(groupName);
        var group = window[groupName];
        console.log(group);
    }
}

// load actions
var testObj = apiGroup.find('*').filter(":contains('canadacentral')").filter("div.clearfix.prettycheckbox.labelright.blue").children().filter("A")[0];
console.log(Object.keys(testObj));
console.log(testObj);

// draw frame
var zNode = document.createElement('div');
zNode.innerHTML = '<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></br></br><button id="canadaCentralButton" type="button">canadacentral</button>' +
    ' <button id = printArrayButton>Print Array</button>';
zNode.setAttribute('id', 'myContainer');
document.body.appendChild(zNode);

// component buttons
document.getElementById("apiButton").addEventListener(
    "click", apiButtonClickAction, false
);

function apiButtonClickAction(zEvent) {
    toggleComponent("api", "apiButton");
    console.log(selectedComponents);
}
document.getElementById("authButton").addEventListener(
    "click", authButtonClickAction, false
);

function authButtonClickAction(zEvent) {
    toggleComponent("auth", "authButton");
    console.log(selectedComponents);
}
document.getElementById("computeButton").addEventListener(
    "click", computeButtonClickAction, false
);

function computeButtonClickAction(zEvent) {
    toggleComponent("compute", "computeButton");
    console.log(selectedComponents);
}
document.getElementById("jobsButton").addEventListener(
    "click", jobsButtonClickAction, false
);

function jobsButtonClickAction(zEvent) {
    toggleComponent("jobs", "jobsButton");
    console.log(selectedComponents);
}
document.getElementById("odbcButton").addEventListener(
    "click", odbcButtonClickAction, false
);

function odbcButtonClickAction(zEvent) {
    toggleComponent("odbc", "odbcButton");
    console.log(selectedComponents);
}
document.getElementById("webappButton").addEventListener(
    "click", webappButtonClickAction, false
);

function webappButtonClickAction(zEvent) {
    toggleComponent("webapp", "webappButton");
    console.log(selectedComponents);
}
document.getElementById("allComponentsButton").addEventListener(
    "click", allComponentsButtonClickAction, false
);

function allComponentsButtonClickAction(zEvent) {
    for (i = 0; i < componentArray.length; i++) {
        var component = componentArray[i];
        var buttonName = component + "Button";
        toggleComponent(component, buttonName);
        console.log(buttonName);
    }
}

// regional buttons
document.getElementById("canadaCentralButton").addEventListener(
    "click", canadaCentralButtonClickAction, false
);

function canadaCentralButtonClickAction(zEvent) {

    checkBoxToggle(testObj, "canadaCentralButton");
}
// aux buttons
document.getElementById("printArrayButton").addEventListener(
    "click", printArrayClickAction, false
);

function printArrayClickAction(zEvent) {
    console.log(componentArray);
}

// aux functions
function toggleComponent(component, buttonName) {
    if (selectedComponents.get(component) == 0) {
        selectedComponents.set(component, 1);
        document.getElementById(buttonName).style.background = '#00FF00';
    } else {
        selectedComponents.set(component, 0);
        document.getElementById(buttonName).style.background = '#FFFFFF';
    }
}

function checkBoxToggle(box, buttonName) {
    if (box.getAttribute("class") == "checked") {
        box.setAttribute("class", "");
        document.getElementById(buttonName).style.background = '#FFFFFF';
    } else {
        box.setAttribute("class", "checked");
        document.getElementById(buttonName).style.background = '#00FF00';

    }
}

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;
         }
     */
}));