// The currently selected button
var activeLink = parent._cb.activeLink;

/**
 *
 * @param base
 * @returns {string}
 */
function generateButtons(base) {
    var template = '' +
        '<a style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: #34dd87; border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 18-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#34dd87" data-hover-color="#f8f8f8" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: #34dd87; border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 4-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#34dd87" data-hover-color="#ffffff" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(23, 23, 23); border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 19-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#34dd87" data-hover-color="#f8f8f8" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 22-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="" data-hover-color="#000000" data-hover-bordercolor="#000000" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: #34dd87; border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 12-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#ffffff" data-hover-color="#34dd87" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(0, 0, 0); border-color: rgb(17, 17, 17); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 17-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="" data-hover-color="#34dd87" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(158, 158, 158); border-color: rgb(188, 188, 188); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 10-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#3dea92" data-hover-color="#ffffff" data-hover-bordercolor="#3dea92" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: #34dd87; color: rgb(248, 248, 248); border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 5-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#2fd07e" data-hover-color="#ffffff" data-hover-bordercolor="#2fd07e" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: #34dd87; color: rgb(255, 255, 255); border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 8-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#000000" data-hover-color="#f8f8f8" data-hover-bordercolor="#000000" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: #34dd87; color: rgb(23, 23, 23); border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 11-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#34dd87" data-hover-color="#ffffff" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(23, 23, 23); color: #34dd87; border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 14-->' +

        '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#34dd87" data-hover-color="#ffffff" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(23, 23, 23); color: rgb(255, 255, 255); border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 16-->';

    if (!base) return template;

    var html   = '';
    html       = template.replace(new RegExp('#34dd87', 'g'), base);

    var hover1 = parent._cb.LightenDarkenColor(base, 15);
    var hover2 = parent._cb.LightenDarkenColor(base, -20);

    html       = html.replace(new RegExp('#3dea92', 'g'), hover1);
    html       = html.replace(new RegExp('#2fd07e', 'g'), hover2);

    return html;
}

/**
 *
 */
function renderMyButtons() {
    var mybuttons = JSON.parse(localStorage.getItem("_mybuttons"));

    var html_mybuttons = '';
    for (var i = 0; i < mybuttons.length; i++) {

        var s   = mybuttons[i] + '';
        var bg  = s.split('|')[0]; //not used
        var css = s.split('|')[1];

        var onmouse = 'onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" ' +
            'onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" ';
        if (s.split('|')[2] == '' && s.split('|')[3] == '' && s.split('|')[4] == '') {
            onmouse = '';
        }
        var datahoverbgcolor = '';
        if (s.split('|')[2] != '') {
            datahoverbgcolor = 'data-hover-bgcolor="' + s.split('|')[2] + '" ';
        }
        var datahovercolor = '';
        if (s.split('|')[3] != '') {
            datahovercolor = 'data-hover-color="' + s.split('|')[3] + '" ';
        }
        var datahoverbordercolor = '';
        if (s.split('|')[4] != '') {
            datahoverbordercolor = 'data-hover-bordercolor="' + s.split('|')[4] + '" ';
        }

        html_mybuttons += '<a ' +
            'data-id="' + i + '" ' +
            onmouse +
            datahoverbgcolor +
            datahovercolor +
            datahoverbordercolor +
            'data-style="' + css + '" ' +
            'style="' + css + '">Button<div class="is-button-remove"><svg class="is-icon-flex" style="fill:rgba(255, 255, 266, 1);width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div></a>';

    }

    document.querySelector('#divMyButtonList').innerHTML = html_mybuttons;
}

/**
 *
 * @param link
 * @param button
 */
function applyStyles(link, button) {

    var margin = 'margin-top: ' + link.style.marginTop + ';';
    margin += 'margin-right: ' + link.style.marginRight + ';';
    margin += 'margin-bottom: ' + link.style.marginBottom + ';';
    margin += 'margin-left: ' + link.style.marginLeft + ';';

    if (button.getAttribute('data-style')) {
        link.setAttribute('style', margin + button.getAttribute('data-style'));
    } else {
        link.setAttribute('style', margin + button.getAttribute('style'));
    }
    if (button.getAttribute('data-hover-bgcolor')) {
        link.setAttribute('data-hover-bgcolor', button.getAttribute('data-hover-bgcolor'));
    } else {
        link.removeAttribute('data-hover-bgcolor');
    }
    if (button.getAttribute('data-hover-color')) {
        link.setAttribute('data-hover-color', button.getAttribute('data-hover-color'));
    } else {
        link.removeAttribute('data-hover-color');
    }
    if (button.getAttribute('data-hover-bordercolor')) {
        link.setAttribute('data-hover-bordercolor', button.getAttribute('data-hover-bordercolor'));
    } else {
        link.removeAttribute('data-hover-bordercolor');
    }
    if (button.getAttribute('onmouseover')) {
        link.setAttribute("onmouseover", "this.setAttribute('data-style',this.style.cssText);if(this.getAttribute('data-hover-bordercolor')) this.style.borderColor=this.getAttribute('data-hover-bordercolor');if(this.getAttribute('data-hover-bgcolor')) this.style.backgroundColor=this.getAttribute('data-hover-bgcolor');if(this.getAttribute('data-hover-color')) this.style.color=this.getAttribute('data-hover-color');");
    } else {
        link.removeAttribute('onmouseover');
    }
    if (button.getAttribute('onmouseout')) {
        link.setAttribute("onmouseout", "this.setAttribute('style',this.getAttribute('data-style'));this.removeAttribute('data-style')");
    } else {
        link.removeAttribute('onmouseout');
    }

    if (parent._cb.settings.emailMode) {
        var a = link.querySelector('a');
        if (a) {
            a.setAttribute('style', 'color: inherit !important; font-weight: inherit !important; font-size: inherit !important');
        }
    }
}

/**
 *
 * @param link
 */
function updateSettings(link) {
    setTimeout(function () {

        var btnBgColor = document.querySelector('.button-bgcolor');
        btnBgColor.style.backgroundColor = link.style.backgroundColor;

        var btnTextColor = document.querySelector('.button-textcolor');
        btnTextColor.style.backgroundColor = link.style.color;

        var btnBorderColor = document.querySelector('.button-bordercolor');
        btnBorderColor.style.backgroundColor = link.style.borderColor;

        var currBw = link.style.borderTopWidth;
        if (currBw == '' || currBw == '1px' || currBw == '2px' || currBw == '3px') {
            document.querySelector('#inpBorderWidth').value = currBw;
        }
        if (link.style.border == 'none' || link.style.border == 'none') {
            document.querySelector('#inpBorderWidth').value = 'none';
        }

        var btnHoverBgColor = document.querySelector('.buttonhover-bgcolor');
        btnHoverBgColor.style.backgroundColor = link.getAttribute('data-hover-bgcolor');

        var btnHoverTextColor = document.querySelector('.buttonhover-textcolor');
        btnHoverTextColor.style.backgroundColor = link.getAttribute('data-hover-color');

        var btnHoverBorderColor  = document.querySelector('.buttonhover-bordercolor');
        btnHoverBorderColor.style.backgroundColor = link.getAttribute('data-hover-bordercolor');

    }, 300);
}

/**
 *
 * @param link
 */
function cleanupClasses(link) {
    removeClass(link, 'is-btn-ghost1');
    removeClass(link, 'is-btn-ghost2');
    removeClass(link, 'is-upper');
    removeClass(link, 'is-btn-small');
    removeClass(link, 'is-btn');
    removeClass(link, 'is-rounded-30');
    removeClass(link, 'btn-primary');
    removeClass(link, 'btn-default');
    removeClass(link, 'btn');
}

/**
 *
 * @param link
 */
function addButtonScript(link) {
    link.setAttribute("onmouseover", "this.setAttribute('data-style',this.style.cssText);" +
        "if(this.getAttribute('data-hover-bordercolor')) this.style.borderColor=this.getAttribute('data-hover-bordercolor');" +
        "if(this.getAttribute('data-hover-bgcolor')) this.style.backgroundColor=this.getAttribute('data-hover-bgcolor');" +
        "if(this.getAttribute('data-hover-color')) this.style.color=this.getAttribute('data-hover-color');");

    link.setAttribute("onmouseout", "this.setAttribute('style',this.getAttribute('data-style'));" +
        "this.removeAttribute('data-style')");
}

/**
 * https://stackoverflow.com/questions/1887104/how-to-get-the-background-color-of-an-element-using-javascript
 * @param element
 * @param property
 * @returns {string|*}
 */
var getStyle = function (element, property) {
    return window.getComputedStyle
        ? window.getComputedStyle(element, null).getPropertyValue(property)
        : element.style[property.replace(/-([a-z])/g, function (g) {
        return g[1].toUpperCase();
    })];
};

/**
 *
 * @param parent
 * @param html
 */
var appendHtml = function (parent, html) {
    parent.insertAdjacentHTML('beforeend', html);
}

/**
 *
 * @param element
 * @param classname
 */
var removeClass = function (element, classname) {
    if (!element) return;
    if (element.classList.length > 0) {
        element.className = element.className.replace(new RegExp('\\b' + classname + '\\b', 'g'), '');
        element.className = element.className.replace(/  +/g, ' ');
        if (element.className === ' ') element.removeAttribute('class');
    }
}

/**
 *
 * @param element
 * @param classname
 */
var addClass = function (element, classname) {
    if (!element) return;
    if (hasClass(element, classname)) return;
    if (element.classList.length === 0) element.className = classname;
    else element.className = element.className + ' ' + classname;
    element.className = element.className.replace(/  +/g, ' ');
}

/**
 *
 * @param element
 * @param classname
 * @returns {boolean}
 */
var hasClass = function (element, classname) {
    if (!element) return false;
    try {
        let s = element.getAttribute('class');
        return new RegExp('\\b' + classname + '\\b').test(s);
    } catch (e) {}
}


var elms = document.querySelectorAll('[data-lang]');
Array.prototype.forEach.call(elms, function (elm) {
    elm.innerText = parent._cb.out(elm.textContent);
});

// Clear the template box
document.querySelector('#divButtonTemplates').innerHTML = '';

var general = '<a style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(23, 23, 23); border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 3-->' +

    '<a style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 24-->' +

    '<a style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(188, 188, 188); border-color: rgb(188, 188, 188); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 25-->' +

    '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="rgb(23, 23, 23)" data-hover-color="#ffffff" data-hover-bordercolor="rgb(23, 23, 23)" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(23, 23, 23); border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!-- Button 20 -->' +

    '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="rgb(225, 225, 225)" data-hover-color="#000000" data-hover-bordercolor="rgb(225, 225, 225)" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 23-->' +

    '<a onmouseover="this.setAttribute(\'data-style\',this.style.cssText);if(this.getAttribute(\'data-hover-bordercolor\')) this.style.borderColor=this.getAttribute(\'data-hover-bordercolor\');if(this.getAttribute(\'data-hover-bgcolor\')) this.style.backgroundColor=this.getAttribute(\'data-hover-bgcolor\');if(this.getAttribute(\'data-hover-color\')) this.style.color=this.getAttribute(\'data-hover-color\');" onmouseout="this.setAttribute(\'style\',this.getAttribute(\'data-style\'));this.removeAttribute(\'data-style\')" data-hover-bgcolor="#ffffff" data-hover-color="#000000" data-hover-bordercolor="#616161" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(158, 158, 158); border-width: 2px; border-color: rgb(188, 188, 188); border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a>';


var divButtonTemplates = document.querySelector('#divButtonTemplates');
appendHtml(divButtonTemplates, generateButtons('#8ea1ff'));
appendHtml(divButtonTemplates, generateButtons());
appendHtml(divButtonTemplates, generateButtons('#ff8733'));
appendHtml(divButtonTemplates, generateButtons('#ffca18'));
appendHtml(divButtonTemplates, generateButtons('#ec4130'));
appendHtml(divButtonTemplates, generateButtons('#07d2c0'));
appendHtml(divButtonTemplates, generateButtons('#07d1ff'));
appendHtml(divButtonTemplates, generateButtons('#ff4c8e'));


//background color
var bgcolor                      = getStyle(activeLink, 'background-color');
var btnBgColor                   = document.querySelector('.button-bgcolor');
btnBgColor.style.backgroundColor = bgcolor;
btnBgColor.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo(true); // checkLater = true

    parent._cb.pickColor(function (color) {

        activeLink.style.backgroundColor                                = color;
        document.querySelector('.button-bgcolor').style.backgroundColor = color;

        //Trigger Change event
        parent._cb.opts.onChange();

    }, document.querySelector('.button-bgcolor').style.backgroundColor);

});

//text color
var textcolor                      = getStyle(activeLink, 'color');
var btnTextColor                   = document.querySelector('.button-textcolor');
btnTextColor.style.backgroundColor = textcolor;
btnTextColor.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo(true); // checkLater = true

    parent._cb.pickColor(function (color) {

        activeLink.style.color = color;
        if (parent._cb.settings.emailMode) {
            var a = activeLink.querySelector('a');
            if (a) a.style.color = color;
        }

        document.querySelector('.button-textcolor').style.backgroundColor = color;

        //Trigger Change event
        parent._cb.opts.onChange();

    }, document.querySelector('.button-textcolor').style.backgroundColor);

});

//border color
var bordercolor                      = getStyle(activeLink, 'border-color');
var btnBorderColor                   = document.querySelector('.button-bordercolor');
btnBorderColor.style.backgroundColor = bordercolor;
btnBorderColor.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo(true); // checkLater = true

    parent._cb.pickColor(function (color) {

        activeLink.style.borderColor                                        = color;
        document.querySelector('.button-bordercolor').style.backgroundColor = color;

        //Trigger Change event
        parent._cb.opts.onChange();

    }, document.querySelector('.button-bordercolor').style.backgroundColor);

});

//border width
var currBw = getStyle(activeLink, 'border-top-width'); // use one side
if (currBw == '' || currBw == '1px' || currBw == '2px' || currBw == '3px') document.querySelector('#inpBorderWidth').value = currBw;
if (activeLink.style.border == 'none' || activeLink.style.border == 'none') document.querySelector('#inpBorderWidth').value = 'none';

var inpBorderWidth = document.querySelector('#inpBorderWidth');
inpBorderWidth.addEventListener('change', function (e) {

    parent._cb.uo.saveForUndo();

    var bw = document.querySelector('#inpBorderWidth').value;
    if (bw == 'none') {
        activeLink.style.border = 'none';
    } else {

        var btnBorderColor = document.querySelector('.button-bordercolor');
        var color          = btnBorderColor.style.backgroundColor;

        if (color == '') {
            btnBorderColor.style.backgroundColor = 'rgb(0,0,0)';
            color                                = 'rgb(0,0,0)';
        }
        activeLink.style.borderWidth = bw;
        activeLink.style.borderColor = color;
        activeLink.style.borderStyle = 'solid';
    }

    //Trigger Change event
    parent._cb.opts.onChange();
});

//border radius
var btnBorderRadiusDec = document.querySelector('.border-radius-dec');
btnBorderRadiusDec.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var borderradius = getStyle(activeLink, 'border-radius');
    if (borderradius == '') borderradius = activeLink.style.borderRadius;
    var currBrad = borderradius;
    if (currBrad == '') currBrad = '0px';
    var n = parseInt(currBrad);
    n     = n - 2;
    if (n <= 0) n = 0;
    activeLink.style.borderRadius = n + 'px';

    //Trigger Change event
    parent._cb.opts.onChange();
});
var btnBorderRadiusInc = document.querySelector('.border-radius-inc');
btnBorderRadiusInc.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var borderradius = getStyle(activeLink, 'border-radius');
    if (borderradius == '') borderradius = activeLink.style.borderRadius;
    var currBrad = borderradius;
    if (currBrad == '') currBrad = '0px';
    var n                         = parseInt(currBrad);
    n                             = n + 2;
    activeLink.style.borderRadius = n + 'px';

    //Trigger Change event
    parent._cb.opts.onChange();
});

//sizes
var btnSizeXXS = document.querySelector('.size-xxs');
btnSizeXXS.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    activeLink.style.padding    = '6px 12px';
    activeLink.style.fontSize   = '8px';
    activeLink.style.lineHeight = '1.5';

    //Trigger Change event
    parent._cb.opts.onChange();
});

var btnSizeXS = document.querySelector('.size-xs');
btnSizeXS.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    activeLink.style.padding    = '8px 17px';
    activeLink.style.fontSize   = '10px';
    activeLink.style.lineHeight = '1.5';

    //Trigger Change event
    parent._cb.opts.onChange();
});

var btnSizeS = document.querySelector('.size-s');
btnSizeS.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    activeLink.style.padding    = '10px 22px';
    activeLink.style.fontSize   = '12px';
    activeLink.style.lineHeight = '1.5';

    //Trigger Change event
    parent._cb.opts.onChange();
});

var btnSizeM = document.querySelector('.size-m');
btnSizeM.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    activeLink.style.padding    = '13px 28px';
    activeLink.style.fontSize   = '14px';
    activeLink.style.lineHeight = '1.5';

    //Trigger Change event
    parent._cb.opts.onChange();
});

var btnSizeL = document.querySelector('.size-l');
btnSizeL.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    activeLink.style.padding    = '16px 35px';
    activeLink.style.fontSize   = '16px';
    activeLink.style.lineHeight = '1.5';

    //Trigger Change event
    parent._cb.opts.onChange();
});

var btnSizeXL = document.querySelector('.size-xl');
btnSizeXL.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    activeLink.style.padding    = '19px 42px';
    activeLink.style.fontSize   = '18px';
    activeLink.style.lineHeight = '1.5';

    //Trigger Change event
    parent._cb.opts.onChange();
});

var btnSizeXXL = document.querySelector('.size-xxl');
btnSizeXXL.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    activeLink.style.padding    = '22px 50px';
    activeLink.style.fontSize   = '20px';
    activeLink.style.lineHeight = '1.5';

    //Trigger Change event
    parent._cb.opts.onChange();
});

//text case
var btnTextCase = document.querySelector('.textcase');
btnTextCase.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var tt = getStyle(activeLink, 'text-transform');
    if (tt == 'uppercase') {
        activeLink.style.textTransform = 'initial';
    } else {
        activeLink.style.textTransform = 'uppercase';
    }

    //Trigger Change event
    parent._cb.opts.onChange();
});

//font weight
var fw = getStyle(activeLink, 'font-weight');
document.querySelector('#inpFontWeight').value = fw;

var inpFontWeight = document.querySelector('#inpFontWeight');
inpFontWeight.addEventListener('change', function (e) {

    parent._cb.uo.saveForUndo();

    var fw                      = document.querySelector('#inpFontWeight').value;
    activeLink.style.fontWeight = fw;

    //Trigger Change event
    parent._cb.opts.onChange();
});

//font size
var btnFontSizeDec = document.querySelector('.font-size-dec');
btnFontSizeDec.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var currFs = getStyle(activeLink, 'font-size');
    var n      = parseInt(currFs);
    n          = n - 1;
    if (n <= 8) n = 8;
    activeLink.style.fontSize = n + 'px';

    //Trigger Change event
    parent._cb.opts.onChange();
});

var btnFontSizeInc = document.querySelector('.font-size-inc');
btnFontSizeInc.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var currFs                = getStyle(activeLink, 'font-size');
    var n                     = parseInt(currFs);
    n                         = n + 1;
    activeLink.style.fontSize = n + 'px';

    //Trigger Change event
    parent._cb.opts.onChange();
});

//letter spacing
var btnLetterSpacingDec = document.querySelector('.letter-spacing-dec');
btnLetterSpacingDec.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var currLs = getStyle(activeLink, 'letter-spacing');
    var n      = parseInt(currLs);
    if (!isNaN(n)) {
        n = n - 1;
        if (n <= 0) n = 0;
    } else {
        n = 0;
    }
    activeLink.style.letterSpacing = n + 'px';

    //Trigger Change event
    parent._cb.opts.onChange();
});

var btnLetterSpacingInc = document.querySelector('.letter-spacing-inc');
btnLetterSpacingInc.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var currLs = getStyle(activeLink, 'letter-spacing');
    var n      = parseInt(currLs);
    if (!isNaN(n)) {
        n = n + 1;
    } else {
        n = 1;
    }
    activeLink.style.letterSpacing = n + 'px';

    //Trigger Change event
    parent._cb.opts.onChange();
});

//make = bg color
var btnSameAsBgColor = document.querySelector('.same-as-bg');
btnSameAsBgColor.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var btnBgColor = document.querySelector('.button-bgcolor');
    var bgcolor    = btnBgColor.style.backgroundColor;

    var btnBorderColor                   = document.querySelector('.button-bordercolor');
    btnBorderColor.style.backgroundColor = bgcolor;

    activeLink.style.borderColor = bgcolor;

    //Trigger Change event
    parent._cb.opts.onChange();
});

//clear
var btnClear = document.querySelector('.input-clear');
btnClear.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    activeLink.setAttribute('style', '');
    document.querySelector('#inpBorderWidth').value = '';

    if (parent._cb.settings.emailMode) {
        var a = activeLink.querySelector('a');
        if (a) {
            a.setAttribute('style', 'color: inherit !important; font-weight: inherit !important; font-size: inherit !important');
        }
    }

    var btnBgColor                   = document.querySelector('.button-bgcolor');
    btnBgColor.style.backgroundColor = '';

    var btnTextColor                   = document.querySelector('.button-textcolor');
    btnTextColor.style.backgroundColor = '';

    var btnBorderColor                   = document.querySelector('.button-bordercolor');
    btnBorderColor.style.backgroundColor = '';

    //Trigger Change event
    parent._cb.opts.onChange();
});

//hover background color
var hoverbgcolor                      = activeLink.getAttribute('data-hover-bgcolor');
var btnHoverBgColor                   = document.querySelector('.buttonhover-bgcolor');
btnHoverBgColor.style.backgroundColor = hoverbgcolor;
btnHoverBgColor.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo(true); // checkLater = true

    parent._cb.pickColor(function (color) {

        activeLink.setAttribute('data-hover-bgcolor', color);
        addButtonScript(activeLink);

        document.querySelector('.buttonhover-bgcolor').style.backgroundColor = color;

        //Trigger Change event
        parent._cb.opts.onChange();

    }, document.querySelector('.buttonhover-bgcolor').style.backgroundColor);

});

//hover text color
var hovertextcolor                      = activeLink.getAttribute('data-hover-color');
var btnHoverTextColor                   = document.querySelector('.buttonhover-textcolor');
btnHoverTextColor.style.backgroundColor = hovertextcolor;
btnHoverTextColor.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo(true); // checkLater = true

    parent._cb.pickColor(function (color) {

        activeLink.setAttribute('data-hover-color', color);
        addButtonScript(activeLink);

        document.querySelector('.buttonhover-textcolor').style.backgroundColor = color;

        //Trigger Change event
        parent._cb.opts.onChange();

    }, document.querySelector('.buttonhover-textcolor').style.backgroundColor);

});

//hover border color
var hoverbordercolor                      = activeLink.getAttribute('data-hover-bordercolor');
var btnHoverBorderColor                   = document.querySelector('.buttonhover-bordercolor');
btnHoverBorderColor.style.backgroundColor = hoverbordercolor;
btnHoverBorderColor.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo(true); // checkLater = true

    parent._cb.pickColor(function (color) {

        activeLink.setAttribute('data-hover-bordercolor', color);
        addButtonScript(activeLink);

        document.querySelector('.buttonhover-bordercolor').style.backgroundColor = color;

        //Trigger Change event
        parent._cb.opts.onChange();

    }, document.querySelector('.buttonhover-bordercolor').style.backgroundColor);

});

//make = hover bg color
var btnSameAsHoverBgColor = document.querySelector('.same-as-hoverbg');
btnSameAsHoverBgColor.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var btnHoverBgColor = document.querySelector('.buttonhover-bgcolor');
    var hoverbgcolor    = btnHoverBgColor.style.backgroundColor;

    var btnHoverBorderColor                   = document.querySelector('.buttonhover-bordercolor');
    btnHoverBorderColor.style.backgroundColor = hoverbgcolor;

    activeLink.setAttribute('data-hover-bordercolor', hoverbgcolor);

    //Trigger Change event
    parent._cb.opts.onChange();
});

//clear hover
var btnClearHover = document.querySelector('.input-clearhover');
btnClearHover.addEventListener('click', function (e) {

    parent._cb.uo.saveForUndo();

    var btnHoverBgColor                   = document.querySelector('.buttonhover-bgcolor');
    btnHoverBgColor.style.backgroundColor = '';

    var btnHoverTextColor                   = document.querySelector('.buttonhover-textcolor');
    btnHoverTextColor.style.backgroundColor = '';

    var btnHoverBorderColor                   = document.querySelector('.buttonhover-bordercolor');
    btnHoverBorderColor.style.backgroundColor = '';

    activeLink.removeAttribute('data-hover-bgcolor');
    activeLink.removeAttribute('data-hover-color');
    activeLink.removeAttribute('data-hover-bordercolor');

    activeLink.removeAttribute('onmouseover');
    activeLink.removeAttribute('onmouseout');

    //Trigger Change event
    parent._cb.opts.onChange();
});


if (localStorage.getItem("_mybuttons") != null) {
    renderMyButtons();

    var buttons = document.querySelectorAll('#divMyButtonList a');
    Array.prototype.forEach.call(buttons, function (button) {

        var activeButton = button;
        button.addEventListener('click', function (e) {

            parent._cb.uo.saveForUndo();

            var links = document.querySelectorAll('#divMyButtonList a');
            Array.prototype.forEach.call(links, function (link) {
                removeClass(link, 'active');
            });
            addClass(activeButton, 'active');

            applyStyles(activeLink, activeButton);

            updateSettings(activeLink);

            cleanupClasses(activeLink);

            //Trigger Change event
            parent._cb.opts.onChange();
        });

    });

    var btnRemoves = document.querySelectorAll('.is-button-remove');
    Array.prototype.forEach.call(btnRemoves, function (btnRemove) {

        btnRemove.addEventListener('click', function (e) {

            parent._cb.uo.saveForUndo();

            var button = e.target.parentNode.parentNode;

            if (button.tagName.toLowerCase() !== 'a') button = button.parentNode;

            if (localStorage.getItem("_mybuttons") != null) {
                var mybuttons = JSON.parse(localStorage.getItem("_mybuttons"));

                var id = button.getAttribute('data-id');

                for (var i = 0; i < mybuttons.length; i++) {
                    if (i == id) {
                        mybuttons.splice(i, 1);

                        localStorage.setItem("_mybuttons", JSON.stringify(mybuttons));

                        button.parentNode.removeChild(button);

                        var n = 0;

                        var links = document.querySelectorAll('#divMyButtonList a');
                        Array.prototype.forEach.call(links, function (link) {
                            link.setAttribute('data-id', n);
                            n = n + 1;
                        });

                        return;
                    }
                }

            }

            //Trigger Change event
            parent._cb.opts.onChange();

        });

    });
}


//save button
var btnSave = document.querySelector('.input-save');
btnSave.addEventListener('click', function (e) {

    var btnBgColor = document.querySelector('.button-bgcolor');
    var bgcolor    = btnBgColor.style.backgroundColor;
    if (bgcolor != '') {
        bgcolor = 'background-color:' + bgcolor + ';';
    } else {
        bgcolor = '';
    }

    var btnTextColor = document.querySelector('.button-textcolor');
    var textcolor    = btnTextColor.style.backgroundColor;
    if (textcolor != '') {
        textcolor = 'color:' + textcolor + ';';
    } else {
        textcolor = '';
    }
    var borderwidth = document.querySelector('#inpBorderWidth').value;
    var border      = '';
    if (borderwidth == 'none') {
        border = 'border:none;';
    } else {

        var btnBorderColor = document.querySelector('.button-bordercolor');
        var bordercolor    = btnBorderColor.style.backgroundColor;

        if (bordercolor != '') {
            bordercolor = 'border-color:' + bordercolor + ';';
        } else {
            bordercolor = '';
        }
        border = 'border-width:' + borderwidth + ';' + bordercolor;
    }
    var borderradius = activeLink.style.borderRadius;
    if (borderradius == '') {
        borderradius = 'border-radius:0px;';
    } else {
        borderradius = 'border-radius:' + borderradius + ';';
    }
    var padding       = activeLink.style.padding;
    var lineheight    = activeLink.style.lineHeight;
    var texttransform = activeLink.style.textTransform;
    var fontweight    = activeLink.style.fontWeight;
    var fontsize      = activeLink.style.fontSize;
    var letterspacing = activeLink.style.letterSpacing;

    //var css = bgcolor + textcolor + border + borderradius + 'padding:' + padding + ';line-height:' + lineheight + ';text-transform:' + texttransform + ';font-weight:' + fontweight + ';font-size:' + fontsize + ';letter-spacing:' + letterspacing + ' ;';
    var css = activeLink.getAttribute('style');

    var mybuttons = [];
    if (localStorage.getItem("_mybuttons") != null) {
        var mybuttons = JSON.parse(localStorage.getItem("_mybuttons"));
    }
    mybuttons.push([
        bgcolor + '|' +
        css + '|' +
        (activeLink.getAttribute('data-hover-bgcolor') ? activeLink.getAttribute('data-hover-bgcolor') : '') + '|' +
        (activeLink.getAttribute('data-hover-color') ? activeLink.getAttribute('data-hover-color') : '') + '|' +
        (activeLink.getAttribute('data-hover-bordercolor') ? activeLink.getAttribute('data-hover-bordercolor') : '')
    ]);
    localStorage.setItem("_mybuttons", JSON.stringify(mybuttons));

    renderMyButtons();

    var buttons = document.querySelectorAll('#divMyButtonList a');
    Array.prototype.forEach.call(buttons, function (button) {

        var activeButton = button;
        button.addEventListener('click', function (e) {

            parent._cb.uo.saveForUndo();

            var links = document.querySelectorAll('#divMyButtonList a');
            Array.prototype.forEach.call(links, function (link) {
                removeClass(link, 'active');
            });
            addClass(activeButton, 'active');

            applyStyles(activeLink, activeButton);

            updateSettings(activeLink);

            cleanupClasses(activeLink);

            //Trigger Change event
            parent._cb.opts.onChange();
        });

    });


    var btnRemoves = document.querySelectorAll('.is-button-remove');
    Array.prototype.forEach.call(btnRemoves, function (btnRemove) {

        btnRemove.addEventListener('click', function (e) {

            parent._cb.uo.saveForUndo();

            var button = e.target.parentNode.parentNode;

            if (button.tagName.toLowerCase() !== 'a') button = button.parentNode;

            if (localStorage.getItem("_mybuttons") != null) {
                var mybuttons = JSON.parse(localStorage.getItem("_mybuttons"));

                var id = button.getAttribute('data-id');

                for (var i = 0; i < mybuttons.length; i++) {
                    if (i == id) {
                        mybuttons.splice(i, 1);

                        localStorage.setItem("_mybuttons", JSON.stringify(mybuttons));

                        button.parentNode.removeChild(button);

                        var n = 0;

                        var links = document.querySelectorAll('#divMyButtonList a');
                        Array.prototype.forEach.call(links, function (link) {
                            link.setAttribute('data-id', n);
                            n = n + 1;
                        });

                        return;
                    }
                }

            }

            //Trigger Change event
            parent._cb.opts.onChange();

        });

    });

});




// Loop through all the template buttons
var buttons = document.querySelectorAll('#divButtonTemplates a');
Array.prototype.forEach.call(buttons, function (button) {

    var activeButton = button;
    button.addEventListener('click', function (e) {

        parent._cb.uo.saveForUndo();

        var links = document.querySelectorAll('#divButtonTemplates a');
        Array.prototype.forEach.call(links, function (link) {
            removeClass(link, 'active');
        });
        addClass(activeButton, 'active');

        applyStyles(activeLink, activeButton);

        updateSettings(activeLink);

        cleanupClasses(activeLink);

        //Trigger Change event
        parent._cb.opts.onChange();
    });
});


/* ------------------- Tabs --------------------- */
var tabs = document.querySelectorAll('.is-tabs a');
Array.prototype.forEach.call(tabs, function (tab) {

    tab.addEventListener('click', function (e) {

        if (hasClass(tab, 'active')) {
            e.preventDefault();
            return false;
        }
        var id = tab.getAttribute('data-content');
        if (!id) {
            e.preventDefault();
            return false;
        }

        var group = tab.parentNode.getAttribute('data-group');

        var samegrouptabs = document.querySelectorAll('.is-tabs[data-group="' + group + '"] > a');
        Array.prototype.forEach.call(samegrouptabs, function (samegrouptab) {
            removeClass(samegrouptab, 'active');
        });
        addClass(tab, 'active');

        var samegroupcontents = document.querySelectorAll('.is-tab-content[data-group="' + group + '"]');
        Array.prototype.forEach.call(samegroupcontents, function (samegroupcontent) {
            samegroupcontent.style.display = 'none';
        });
        document.querySelector('#' + id).style.display = 'block';

        e.preventDefault();
        return false;
    });

});
