/*
Show Grid Plugin
*/

(function () {

    var icon_html = '<svg width="0" height="0" style="position:absolute;display:none;">' +
                    '<defs>' +
                        '<symbol viewBox="0 0 512 512" id="ion-ios-grid-view-outline"><path d="M448 192v-16H336V64h-16v112H192V64h-16v112H64v16h112v128H64v16h112v112h16V336h128v112h16V336h112v-16H336V192h112zM320 320H192V192h128v128z"></path></symbol>' +
                     '</defs>' +
                '</svg>';

    _cb.addHtml(icon_html);

    var css = '<style>' +
            '.container.showgrid > div > div {outline: 1px solid rgba(132, 132, 132, 0.27); outline-offset: 1px;}' +
        '</style>';

    _cb.addCss(css);

    var button_html = '<button id="btnShowGrid" title="Grid Outline">' +
                    '<svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.7);width:14px;height:14px;"><use xlink:href="#ion-ios-grid-view-outline"></use></svg>' +
                '</button>';

    _cb.addButton('showgrid', button_html, '#btnShowGrid', function () {

        showGrid();

    });

    function showGrid() {

        // Get all editable areas
        const areas = document.querySelectorAll('.container');
        Array.prototype.forEach.call(areas, function(area){

            if(hasClass(area,'showgrid')){
                removeClass(area, 'showgrid'); 
            } else {
                addClass(area, 'showgrid'); 
            }
        });
    }

    function addClass(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, ' ');
    }

    function removeClass(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, ' ');
        }
    }

    function hasClass(element, classname) {
        if(!element) return false;
        return element.classList ? element.classList.contains(classname) : new RegExp('\\b'+ classname+'\\b').test(element.className);
    }

})();