CreativeButton

importOmModule("/js/ButtonInformation.js");

/* Result Button */
mainResultButton = document.getElementById("creativebutton-result__button");

/******************* Content Buttons Logic ***************************/
function contentButtonHandler(buttonID) {
    contentButton = document.getElementById(buttonID);
    childElements = contentButton.parentNode.getElementsByClassName(contentButton.parentNode.id
        + "__element");
    for (childElement of childElements) {
        childElement.classList.toggle("unvisible");
    }
}

/* Content buttons add listener */
["creativebutton-normalstate__button_content", "creativebutton-hoverstate__button_content",
 "creativebutton-pressedstate__button_content", "creativebutton-normalstate__button_back",
 "creativebutton-hoverstate__button_back", "getcolor-gradientsettings__buttonradial",
 "getcolor-gradientsettings__buttonlinear",
 "creativebutton-pressedstate__button_back"].forEach(function(buttonID){
    ["click", "touchend"].forEach(function(eventType){
        document.getElementById(buttonID).addEventListener(eventType, function(){
            contentButtonHandler(buttonID);
        });
    });
 });

/**************** END: Content Buttons Logic *************************/

/******************* App menu ***************************/

/* Open menu button handler */
function appMenuOpen(menuoverlayID, dataInfo = "app") {
    menuOverlay = document.getElementById(menuoverlayID);
    titleBarSize = parseFloat(window.getComputedStyle(
        document.getElementById("app-interface__titlebar")).getPropertyValue("height"))
        + parseFloat(window.getComputedStyle(
        document.getElementById("app-interface__titlebar")).getPropertyValue("padding-top"))
        + parseFloat(window.getComputedStyle(
        document.getElementById("app-interface__titlebar")).getPropertyValue("padding-bottom"));
    windowContentSize = parseFloat(window.getComputedStyle(
        document.getElementById("app-interface__content")).getPropertyValue("height"));
    menuOverlay.style.top = titleBarSize + "px";
    menuOverlay.style.height = windowContentSize + "px";

    if (menuOverlay.getElementsByClassName("creativebutton-menuoverlay__element").length > 3)
        menuOverlay.style.left = "-4px";
    
    if (dataInfo != "app") {
        menuOverlay.setAttribute('data-info', dataInfo);
    }

    ["click", "touchend"].forEach(function(eventType){
        menuOverlay.getElementsByClassName("creativebutton-menuoverlay__element_close")[0].addEventListener(
            eventType, function(){
            appMenuClose(menuoverlayID);
        });
    });
}

/* Close menu button handler */
function appMenuClose(menuoverlayID) {
    document.getElementById(menuoverlayID).style.height = "0%";
}

["click", "touchend"].forEach(function(eventType){
    document.getElementById("creativebutton-managebutton__button_menu").addEventListener(eventType, function(){
        appMenuOpen("creativebutton-menuoverlay_app");
    });
});

/**************** END: App menu *************************/

/******************** Button customize ******************/

/* Button caption */
fieldButtonCaption = document.getElementById("creativebutton-managebutton__field_buttonname");
fieldButtonCaption.addEventListener("input", function(){
    mainResultButton.textContent = fieldButtonCaption.value;
});

/* Change font size button handlers */
["click", "touchend", "input", "keyup", "propertychange"].forEach(function(eventType){
    ["creativebutton-normalstate__fontsize", "creativebutton-hoverstate__fontsize",
     "creativebutton-pressedstate__fontsize"].forEach(function(fieldID){
         document.getElementById(fieldID).addEventListener(eventType, function(){
             // Добавить функцию проверки поля на цифры
             document.getElementById(fieldID).setAttribute("data-info",
                document.getElementById(fieldID).value);
             changeFontSize(fieldID);
         });
     });
});

/* Change font size function */
// creativebutton-pressedstate__fontsize
function changeFontSize(elementID) {
    currentState = elementID.split("__")[0].split("-")[1].slice(0, -5);
    currentSizeField = document.getElementById("creativebutton-" + currentState + "state__fontsize");
    currentMetric = document.getElementById("creativebutton-" + currentState + "state__button_fontmetric");
    buttonInformation.setProperty(currentState, "fontsize", parseInt(currentSizeField.value));
    switch(currentState){
        case "normal":
            setResultButtonToNormal();
            mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
                + currentMetric.textContent.replace(/\s/g, "");
            setResultButtonToHover();
            mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
                + currentMetric.textContent.replace(/\s/g, "");
            document.getElementById("creativebutton-hoverstate__fontsize").value
                = parseInt(currentSizeField.value.replace(/\s/g, ""));
            document.getElementById("creativebutton-hoverstate__button_fontmetric").textContent
                = document.getElementById("creativebutton-normalstate__button_fontmetric").textContent;
            setResultButtonToPressed();
            mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
                + currentMetric.textContent.replace(/\s/g, "");
            document.getElementById("creativebutton-pressedstate__fontsize").value
                = parseInt(currentSizeField.value.replace(/\s/g, ""));
            document.getElementById("creativebutton-pressedstate__button_fontmetric").textContent
                = document.getElementById("creativebutton-normalstate__button_fontmetric").textContent;
            setResultButtonToNormal();
            break;
        case "hover":
            setResultButtonToHover();
            mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
                + currentMetric.textContent.replace(/\s/g, "");
            setResultButtonToNormal();
            break;
        case "pressed":
            setResultButtonToPressed();
            mainResultButton.style.fontSize = currentSizeField.value.replace(/\s/g, "")
                + currentMetric.textContent.replace(/\s/g, "");
            setResultButtonToNormal();
    }
}

/* Metric enum */
var metricsEnum;
(function (metricsEnum) {
    metricsEnum[metricsEnum["px"] = "px"] = "pt";
    metricsEnum[metricsEnum["pt"] = "pt"] = "em";
    metricsEnum[metricsEnum["em"] = "em"] = "px";
})(metricsEnum || (metricsEnum = {}));

/* Font metric */
["click", "touchend"].forEach(function(eventType){
    ["creativebutton-normalstate__button_fontmetric", "creativebutton-hoverstate__button_fontmetric",
     "creativebutton-pressedstate__button_fontmetric"].forEach(function(buttonID){
        document.getElementById(buttonID).addEventListener(eventType, function(){
            this.textContent = metricsEnum[this.textContent.replace(/\s/g, "")];
            currentSizeField = document.getElementById("creativebutton-"
                + buttonID.split("__")[0].split("-")[1].slice(0, -5)
                + "state__fontsize");
            if (this.textContent == "px") { // em to px
                currentSizeField.value =
                    (parseFloat(currentSizeField.getAttribute("data-info")) * 16).toFixed();
                currentSizeField.setAttribute("data-info",
                    (parseFloat(currentSizeField.getAttribute("data-info")) * 16));
            }
            else if (this.textContent == "pt") { // px to pt
                currentSizeField.value =
                    (parseFloat(currentSizeField.getAttribute("data-info")) * 0.75).toFixed();
                currentSizeField.setAttribute("data-info",
                    (parseFloat(currentSizeField.getAttribute("data-info")) * 0.75));
            }
            else if (this.textContent == "em") { // pt to em
                currentSizeField.value = 
                    (parseFloat(currentSizeField.getAttribute("data-info")) * 0.08333333333333334).toFixed();
                currentSizeField.setAttribute("data-info",
                    (parseFloat(currentSizeField.getAttribute("data-info")) * 0.08333333333333334));
            }
            changeFontSize(buttonID);
        });
    });
});

/* Font family */
["click", "touchend"].forEach(function(eventType){
    ["creativebutton-normalstate__button_font", "creativebutton-hoverstate__button_font",
     "creativebutton-pressedstate__button_font"].forEach(function(buttonID){
        document.getElementById(buttonID).addEventListener(eventType, function(){
            appMenuOpen("creativebutton-menuoverlay_font",
                buttonID.split("__")[0].split("-")[1].slice(0, -5));
        });
     });
});

/* Select font family */
["click", "touchend"].forEach(function(eventType){
    ["creativebutton-menuoverlay__element_arial", "creativebutton-menuoverlay__element_courier",
     "creativebutton-menuoverlay__element_georgia", "creativebutton-menuoverlay__element_impact",
     "creativebutton-menuoverlay__element_roboto", "creativebutton-menuoverlay__element_times",
     "creativebutton-menuoverlay__element_verdana"].forEach(function(buttonID){
        document.getElementById(buttonID).addEventListener(eventType, function(){
            currentState = document.getElementById("creativebutton-menuoverlay_font").getAttribute("data-info");
            setValueButtonFont("creativebutton-" + currentState + "state__button_font",
                this.textContent, currentState);
            appMenuClose("creativebutton-menuoverlay_font");
        });
    });
});

/* Font family full names */
const fontFamilyNames = {"arial": "Arial, sans-serif", "courier": "Courier New, sans-serif",
                         "georgia": "Georgia, sans-serif", "impact": "Impact, sans-serif",
                         "roboto": "'Roboto', sans-serif", "times": "Times New Roman, sans-serif",
                         "verdana": "Verdana, sans-serif"};

/* Set value for button font family */
function setValueButtonFont(buttonID, buttonFont, currentState) {
    buttonElement = document.getElementById(buttonID);
    buttonElement.setAttribute("data-info", buttonFont);
    
    if (buttonFont.length > 13)
        buttonElement.textContent = buttonFont.slice(0, 10) + "...";
    else
        buttonElement.textContent = buttonFont;
    
    switch(currentState) {
        case "normal":
            setResultButtonToNormal();
            mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
            setResultButtonToHover();
            mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
            setResultButtonToPressed();
            mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
            setResultButtonToNormal();
            document.getElementById("creativebutton-hoverstate__button_font").textContent
                = buttonElement.textContent;
            document.getElementById("creativebutton-pressedstate__button_font").textContent
                = buttonElement.textContent;
            break;
        case "hover":
            setResultButtonToHover();
            mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
            setResultButtonToNormal();
            break;
        case "pressed":
            setResultButtonToPressed();
            mainResultButton.style.fontFamily = fontFamilyNames[buttonFont.split(" ")[0].toLowerCase()];
            setResultButtonToNormal();
            break;
    }
}

/* Color buttons pressed */
["click", "touchend"].forEach(function(eventType){
    document.getElementById("creativebutton-managebutton__button_code").addEventListener(eventType, function(){
        openCodeDialogWindow();
    });
    ["creativebutton-normalstate__button_border", "creativebutton-hoverstate__button_border",
     "creativebutton-pressedstate__button_border"].forEach(function(buttonID){
        document.getElementById(buttonID).addEventListener(eventType, function(){
            openBorderDialogWindow(buttonID.split("__")[0].split("-")[1].slice(0, -5));
        });
     });
    ["creativebutton-normalstate__button_color", "creativebutton-hoverstate__button_color",
     "creativebutton-pressedstate__button_color"].forEach(function(buttonID){
        document.getElementById(buttonID).addEventListener(eventType, function(){
            openColorDialogWindow(buttonID.split("__")[0].split("-")[1].slice(0, -5));
        });
     });
     ["creativebutton-normalstate__button_shadow", "creativebutton-hoverstate__button_shadow",
      "creativebutton-pressedstate__button_shadow"].forEach(function(buttonID){
          document.getElementById(buttonID).addEventListener(eventType, function(){
              openShadowDialogWindow(buttonID.split("__")[0].split("-")[1].slice(0, -5));
          });
      });
});

/* Open Code Dialog function */
function openCodeDialogWindow() {
    codeDialogWindow = document.getElementById("codedialog-interface__window");
    
    window.setTimeout(function(){
        if (codeDialogWindow.classList.contains("unvisible")) {
            codeDialogWindow.classList.toggle("unvisible");
            codeDialogWindow.style.zIndex = openedWindows.length;
            document.getElementById("app-interface__window").style.zIndex -= 1;
            codeDialogWindow.style.opacity = "1.0";
            codeDialogWindow.style.top = "calc(50% - " + (parseFloat(window.getComputedStyle(codeDialogWindow).getPropertyValue("height")) / 2) + "px)";
            codeDialogWindow.style.left = "calc(50% - " + (parseFloat(window.getComputedStyle(codeDialogWindow).getPropertyValue("width")) / 2) + "px)";
            document.getElementById("codedialog-codeblock__codetab_css").click();
            displayLineNumbers("codedialog", "css");
            highlightCssCode("codedialog", "css");
        }
    }, 5);
    // TODO: Add function for reset settings in dialog window
}

/* States names enum */
const stateNames = {"normal": "Нормальный", "hover": "Наведение", "pressed": "Нажатие",
                    "text": "Тень текста", "button": "Тень кнопки", "border": "Граница"};

/* Open Color Dialog function */
function openColorDialogWindow(currentState, callWindowID="app-interface__window") {
    let colorDialogWindow = document.getElementById("getcolor-interface__window");
    let callWindow = document.getElementById(callWindowID);
    colorDialogWindow.setAttribute("data-info", currentState);
    document.getElementById("getcolor-interface__titlebarcaption").textContent = "Диалог цвета - " + stateNames[currentState];
    
    window.setTimeout(function(){
        if (colorDialogWindow.classList.contains("unvisible")) {
            colorDialogWindow.classList.toggle("unvisible");
            colorDialogWindow.style.opacity = "1.0";
            colorDialogWindow.style.top = "calc(50% - " + (parseFloat(window.getComputedStyle(colorDialogWindow).getPropertyValue("height")) / 2) + "px)";
            colorDialogWindow.style.left = "calc(50% - " + (parseFloat(window.getComputedStyle(colorDialogWindow).getPropertyValue("width")) / 2) + "px)";
        }
        colorDialogWindow.style.zIndex = openedWindows.length;
        callWindow.style.zIndex -= 1;
        changeLinePickerCursor();
    }, 50);

    updateSettingsColorDialog(currentState, callWindow);
}

/* Open Shadow Dialog function */
function openShadowDialogWindow(currentState) {
    let shadowDialogWindow = document.getElementById("shadowdialog-interface__window");
    shadowDialogWindow.setAttribute("data-info", currentState);

    document.getElementById("shadowdialog-interface__titlebarcaption").textContent = "Свойства тени - " + stateNames[currentState];
    
    window.setTimeout(function(){
        if (shadowDialogWindow.classList.contains("unvisible")) {
            shadowDialogWindow.classList.toggle("unvisible");
            shadowDialogWindow.style.zIndex = openedWindows.length;
            document.getElementById("app-interface__window").style.zIndex -= 1;
            shadowDialogWindow.style.opacity = "1.0";
            shadowDialogWindow.style.top = "calc(50% - " + (parseFloat(window.getComputedStyle(shadowDialogWindow).getPropertyValue("height")) / 2) + "px)";
            shadowDialogWindow.style.left = "calc(50% - " + (parseFloat(window.getComputedStyle(shadowDialogWindow).getPropertyValue("width")) / 2) + "px)";
        }
    }, 5);
    
    updateSettingsShadowDialog(currentState);
}

/* Open Border Dialog function */
function openBorderDialogWindow(currentState) {
    borderDialogWindow = document.getElementById("borderdialog-interface__window");
    borderDialogWindow.setAttribute("data-info", currentState);

    document.getElementById("borderdialog-interface__titlebarcaption").textContent = "Настройки границы - " + stateNames[currentState];
    
    window.setTimeout(function(){
        if (borderDialogWindow.classList.contains("unvisible")) {
            borderDialogWindow.classList.toggle("unvisible");
            borderDialogWindow.style.zIndex = openedWindows.length;
            document.getElementById("app-interface__window").style.zIndex -= 1;
            borderDialogWindow.style.opacity = "1.0";
            borderDialogWindow.style.top = "calc(50% - " + (parseFloat(window.getComputedStyle(borderDialogWindow).getPropertyValue("height")) / 2) + "px)";
            borderDialogWindow.style.left = "calc(50% - " + (parseFloat(window.getComputedStyle(borderDialogWindow).getPropertyValue("width")) / 2) + "px)";
        }
    }, 5);
    
    updateSettingsBorderDialog(currentState);
}

/**********************/

/***************** END: Button customize ****************/

/* Result button */

mainResultButton.addEventListener("mouseenter", function(){
    saveStyleButton();
    mainResultButton.classList = ["creativebutton-result__hoverbutton"];
    setStyleButton();
});

mainResultButton.addEventListener("mouseleave", function(){
    saveStyleButton();
    mainResultButton.classList = ["creativebutton-result__normalbutton"];
    setStyleButton();
});

["mousedown", "touchstart"].forEach(function(eventType){
    mainResultButton.addEventListener(eventType, function(){
        saveStyleButton();
        mainResultButton.classList = ["creativebutton-result__pressedbutton"];
        setStyleButton();
    });
});

["mouseup", "touchend"].forEach(function(eventType){
    mainResultButton.addEventListener(eventType, function(){
        saveStyleButton();
        mainResultButton.classList = ["creativebutton-result__hoverbutton"];
        setStyleButton();
    });
});

/* Change current state of result button to normal */
function setResultButtonToNormal() {
    saveStyleButton();
    mainResultButton.classList = ["creativebutton-result__normalbutton"];
    setStyleButton();
}

/* Change current state of result button to hover */
function setResultButtonToHover() {
    saveStyleButton();
    mainResultButton.classList = ["creativebutton-result__hoverbutton"];
    setStyleButton();
}

/* Change current state of result button to pressed */
function setResultButtonToPressed() {
    saveStyleButton();
    mainResultButton.classList = ["creativebutton-result__pressedbutton"];
    setStyleButton();
}

/* Storage for result button for all states */
resultButtonStyles = ["", "", ""];

/* Save current style of button to resultButtonStyles */
function saveStyleButton() {
    currentState = mainResultButton.className.split("__")[1].slice(0, -6);
    switch(currentState) {
        case "normal":
            resultButtonStyles[0] = mainResultButton.style.cssText;
            break;
        case "hover":
            resultButtonStyles[1] = mainResultButton.style.cssText;
            break;
        case "pressed":
            resultButtonStyles[2] = mainResultButton.style.cssText;
            break;
    }
}

/* Set saved style of button from resultButtonStyles */
function setStyleButton() {
    currentState = mainResultButton.className.split("__")[1].slice(0, -6);
    switch(currentState) {
        case "normal":
            mainResultButton.style.cssText = resultButtonStyles[0];
            break;
        case "hover":
            mainResultButton.style.cssText = resultButtonStyles[1];
            break;
        case "pressed":
            mainResultButton.style.cssText = resultButtonStyles[2];
            break;
    }
}

/* Temlates button click handler */
["click", "touchend"].forEach(function(eventType){
    document.getElementById("creativebutton-menuoverlay__element_templatebasic").addEventListener(eventType, () => {
        setButtonTemplate("basic");
        appMenuClose("creativebutton-menuoverlay_app");
    });
    document.getElementById("creativebutton-menuoverlay__element_templatecreative").addEventListener(eventType, () => {
        setButtonTemplate("creative");
        appMenuClose("creativebutton-menuoverlay_app");
    });
    document.getElementById("creativebutton-menuoverlay__element_templatesolid").addEventListener(eventType, () => {
        setButtonTemplate("solid");
        appMenuClose("creativebutton-menuoverlay_app");
    });
});

/* Set button to selected template */
function setButtonTemplate(templateName) {
    buttonInformation.setTemplate(getTemplateButton(templateName));
    // Установить все значения кнопки в соответствии со значениями ButtonInformation
    var currentStates = ["normal", "hover", "pressed"];
    var backgroundString, rgbaValues, buttonNumberElement;
    
    currentStates.forEach((currentState) => {
        switchCurrentStateMainResultButton(currentState);
        document.getElementById("creativebutton-" + currentState + "state__fontsize").value = buttonInformation.getProperty(
            currentState, "fontsize");
        document.getElementById("creativebutton-" + currentState + "state__fontsize").setAttribute("data-info",
            buttonInformation.getProperty(currentState, "fontsize"));
        document.getElementById("creativebutton-" + currentState + "state__button_fontmetric").textContent = "px";
        document.getElementById("creativebutton-" + currentState + "state__button_font").textContent = buttonInformation.getProperty(
            currentState, "fontfamily");
        document.getElementById("creativebutton-" + currentState + "state__button_font").setAttribute("data-info", buttonInformation.getProperty(
            currentState, "fontfamily"));
        mainResultButton.style.fontSize = buttonInformation.getProperty(currentState, "fontsize") + "px";
        mainResultButton.style.fontFamily = fontFamilyNames[buttonInformation.getProperty(
            currentState, "fontfamily").split(" ")[0].toLowerCase()];
        if (buttonInformation.getProperty(currentState, "bordersize") > 0) {
            rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "bordercolor"));
            mainResultButton.style.border = buttonInformation.getProperty(currentState, "bordersize")
                + "px " + buttonInformation.getProperty(currentState, "bordertype")
                + " rgba(" + rgbaValues[0] + ", " + rgbaValues[1] + ", " + rgbaValues[2] + ", "
                + rgbaValues[3].toPrecision(2) + ")";
        } else {
            mainResultButton.style.border = "";
        }
        if (buttonInformation.getProperty(currentState, "borderradius") > 0) {
            mainResultButton.style.borderRadius = buttonInformation.getProperty(currentState, "borderradius") + "px";
        } else {
            mainResultButton.style.borderRadius = "";
        }
        if ((buttonInformation.getProperty(currentState, "paddingtop") > 0) ||
            (buttonInformation.getProperty(currentState, "paddingbottom") > 0) ||
            (buttonInformation.getProperty(currentState, "paddingright") > 0) ||
            (buttonInformation.getProperty(currentState, "paddingleft") > 0)) {
            mainResultButton.style.padding = buttonInformation.getProperty(currentState, "paddingtop") + "px "
                + buttonInformation.getProperty(currentState, "paddingright") + "px "
                + buttonInformation.getProperty(currentState, "paddingbottom") + "px "
                + buttonInformation.getProperty(currentState, "paddingleft") + "px";
        } else {
            mainResultButton.style.padding = "";
        }
        if ((buttonInformation.getProperty(currentState, "boxshadowtype") != 'none') &&
            ((buttonInformation.getProperty(currentState, "boxshadowx") != 0) ||
            (buttonInformation.getProperty(currentState, "boxshadowy") != 0) ||
            (buttonInformation.getProperty(currentState, "boxshadowblur") != 0) ||
            (buttonInformation.getProperty(currentState, "boxshadowsize") != 0))) {
            rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "boxshadowcolor"));
            mainResultButton.style.boxShadow = buttonInformation.getProperty(currentState, "boxshadowtype")
                + " " + buttonInformation.getProperty(currentState, "boxshadowx")
                + "px " + buttonInformation.getProperty(currentState, "boxshadowy")
                + "px " + buttonInformation.getProperty(currentState, "boxshadowblur")
                + "px " + buttonInformation.getProperty(currentState, "boxshadowsize")
                + "px rgba(" + rgbaValues[0] + ", " + rgbaValues[1] + ", "
                + rgbaValues[2] + ", " + rgbaValues[3].toPrecision(2) + ")";
        } else {
            mainResultButton.style.boxShadow = "";
        }
        if ((buttonInformation.getProperty(currentState, "textshadowtype") != 'none') &&
            ((buttonInformation.getProperty(currentState, "textshadowx") != 0) ||
            (buttonInformation.getProperty(currentState, "textshadowy") != 0) ||
            (buttonInformation.getProperty(currentState, "textshadowblur") != 0))) {
            rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "textshadowcolor"));
            mainResultButton.style.textShadow = buttonInformation.getProperty(currentState, "textshadowx")
                + "px " + buttonInformation.getProperty(currentState, "textshadowy")
                + "px " + buttonInformation.getProperty(currentState, "textshadowblur")
                + "px rgba(" + rgbaValues[0] + ", " + rgbaValues[1] + ", "
                + rgbaValues[2] + ", " + rgbaValues[3].toPrecision(2) + ")";
        } else {
            mainResultButton.style.textShadow = "";
        }
        mainResultButton.style.color = buttonInformation.getProperty(currentState, "textcolor");
        if (buttonInformation.getProperty(currentState, "layers").length > 1) {
            mainResultButton.style.background = generateGradientBackgroundString(currentState);
        } else {
            rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "colors")[0]);
            mainResultButton.style.background = "rgba(" + [rgbaValues[0], rgbaValues[1],
                rgbaValues[2], rgbaValues[3].toPrecision(2)].toString().replaceAll(",", ", ") + ")";
        }
        cStateIterator = 0;
        currentStates.forEach((cState) => {
            if (cState == currentState) {
                buttonNumberElement = document.getElementsByClassName("getcolor-gradientsblock")[0].children[cStateIterator];
                if (buttonInformation.getProperty(currentState, "layers").length > 1)
                    backgroundString = generateGradientBackgroundString(currentState);
                else {
                    rgbaValues = HEXAToRGBA(buttonInformation.getProperty(currentState, "colors")[0]);
                    backgroundString = "rgba(" + [rgbaValues[0], rgbaValues[1],
                        rgbaValues[2], rgbaValues[3].toPrecision(2)].toString().replaceAll(",", ", ") + ")";
                }
                buttonNumberElement.style.background = backgroundString;
                buttonNumberElement.setAttribute("data-info", "background: " + backgroundString);
            }
            cStateIterator++;
        });
    });

    setResultButtonToNormal();
}

/* On start application set parameters */
function onRunningCreativeButtonApp() {
    buttonInformation.setTemplate(getTemplateButton("basic"));
    document.getElementById("creativebutton-normalstate__fontsize").value = buttonInformation.getProperty(
        "normal", "fontsize");
    changeFontSize("creativebutton-normalstate__fontsize");
    setValueButtonFont("creativebutton-normalstate__button_font",
                document.getElementById("creativebutton-menuoverlay__element_"
                + buttonInformation.getProperty("normal", "fontfamily").split(" ")[0].toLowerCase()).textContent,
                "normal");
}