<div class="">
    <!-- Options -->
    <div class="row valign-wrapper options">
        <div class="col s1 left">
            <p>Options:</p>
        </div>
        <div class="col s4 left">
            <div class="switch">
                <label>
                    Remove line breaks in JS
                    <input type="checkbox" checked id="linebreakInJSCheckbox" />
                    <span class="lever"></span>
                    Keep line breaks in JS
                </label>
            </div>
        </div>
        <div class="col s4 left">
            <div class="switch">
                <label>
                    Remove line breaks in string
                    <input type="checkbox" id="linebreakInStringCheckbox" />
                    <span class="lever"></span>
                    Keep line breaks in string
                </label>
            </div>
        </div>
        <div class="col s3 left">
            <div class="switch">
                <label>
                    Double Quote
                    <input type="checkbox" id="useSingleQuoteCheckbox" checked />
                    <span class="lever"></span>
                    Single Quote
                </label>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Input -->
        <div class="col s5 offset-s1">
            <div class="row">
                <div class="col s12">
                    <div class="mainBoxWrapper input-field">
                        <textarea id="cssInput" class="materialize-textarea" placeholder="paste your CSS here..."></textarea>
                        <label for="cssInput">CSS Input</label>
                        <div class="toolbar">
                            <div class="button btn red clear">Clear</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Output -->
        <div class="col s5 offset-s025">
            <div class="row">
                <div class="col s12">
                    <div class="mainBoxWrapper input-field">
                        <textarea id="jsOutput" class="materialize-textarea" placeholder="JS output will appear here..."></textarea>
                        <label for="jsOutput">JS Output</label>
                        <div class="toolbar">
                            <div class="button btn copyOutput" data-clipboard-target="#jsOutput">Copy to Clipboard</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col s2 offset-s2">
            <div class="button btn green" id="demoButton">Demo</div>
        </div>
    </div>
</div>

#cssInput,#jsOutput {
  min-height: 200px;
  margin-top: 20px;
}
.mainBoxWrapper {
  border: 1px solid black;
  padding: 20px;
}
#jsOutput {
  cursor: not-allowed;
}
.toolbar {
  width: 100%;
  text-align: center;
}
.offset-s05 {
    margin-left: calc(100% / 24) !important;
}
.offset-s025 {
    margin-left: calc(100% / 48) !important;
}
label[for] {
    margin-left: 5px;
}
.options {
    margin: 10px 0px;
    border-top: 1px dashed black;
    border-bottom : 1px dashed black;
}
.row {
    margin-bottom: 5px !important;
}

var cssInputField = document.getElementById('cssInput');
var jsOutputField = document.getElementById('jsOutput');
var removeAllLineBreaksInJSCheckbox = document.getElementById('linebreakInJSCheckbox');
window.removeAllLineBreaksInJS = !removeAllLineBreaksInJSCheckbox.checked;
var removeAllLineBreaksInStringCheckbox = document.getElementById('linebreakInStringCheckbox');
window.removeAllLineBreaksInString = !removeAllLineBreaksInStringCheckbox.checked;
var useSingleQuoteCheckbox = document.getElementById('useSingleQuoteCheckbox');
window.useSingleQuote = useSingleQuoteCheckbox.checked;

function generateOutput() {
    var valid = true;
    var finalJs = '// Please paste valid CSS into the input box on the left';
    var cssInput = cssInputField.value;
    if (cssInput !== '') {
        var generatedJs = cssInput;
        // Remove comments
        generatedJs = generatedJs.replace(/\/\*[^\/]*\*\//gim, '');
        // Remove standalone line breaks - i.e replace double or more breaks with single
        generatedJs = generatedJs.replace(/[\r\n][\r\n]+/gim, '\r');
        // Remove leading line break
        generatedJs = generatedJs.replace(/^[\r\n]+/gi,'');
        // Remove trailing line break
        generatedJs = generatedJs.replace(/[\r\n]+$/gi,'');
        // Replace all single quotes with doubles
        generatedJs = generatedJs.replace(/\'/gim, '"');

        if (window.removeAllLineBreaksInJS === true) {
            generatedJs = generatedJs.replace(/[\r\n]*/gim, '');
            generatedJs = generatedJs.replace(/\s*/gim, '');
            // Before wrapping generated js in quotes, escape quotes inside
            generatedJs = quoteEscape(generatedJs);
            if (/^['"]{1}.*['"]{1}/.test(generatedJs)===false){
                generatedJs = '"' + generatedJs + '"';
            }
        }
        else {
            // Since we are keeping line breaks, will need to make sure any line breaks are turned into joined strings
            var lineJoinerString = ' +';
            if (!window.removeAllLineBreaksInString){
                lineJoinerString = lineJoinerString + ' "\\n" +';
            }
            generatedJs = generatedJs.replace(/^([\s\t]*)(.*)$/gim, '$1"$2"' + lineJoinerString);
            if (!window.removeAllLineBreaksInString){
                // Replace tabs or spaces with tab char
                generatedJs = generatedJs.replace(/^(?:\t|\s{2,4})+/gim,'"\\t" + ');
            }
            // Remove very last line join
            generatedJs = generatedJs.replace(/\"\s*\+\s*$/g, '"');
        }
        if (window.useSingleQuote){
            // Replace all doubles with singles
            generatedJs = generatedJs.replace(/\"/gim,"'");
            // Create var
            generatedJs = "var myCss = '' +" + "\n" + generatedJs + ";";
        }
        else {
            // Create var
            generatedJs = 'var myCss = "" +' + "\n" + generatedJs + ';';
        }
        if (valid) {
            finalJs = enclosedQuoteEscaper(generatedJs);
        }
    } else {
        valid = false;
    }
    jsOutputField.value = finalJs;
    window.finalJS = finalJs;
}

function lineFormatter(line){
    var formattedLine = line;
    var quoteChar = window.useSingleQuote===true ? "'" : '"';
    // Escape any quotes within string first before enclosing in outer quotes
    formattedLine = formattedLine.replace(/(['"])/gim,'/$1');
    // Enclose line boundary with quotes
    formattedLine = formattedLine.replace(/^([\s\t]*)(.*)$/gim, '$1' + quoteChar + '$2' + quoteChar);
    if (!window.removeAllLineBreaksInString){
        // Replace tabs or spaces with tab char
        formattedLine = formattedLine.replace(/^(?:\t|\s{2,4})+/gim,'"\\t" + ');
    }
    return formattedLine;
}

function enclosedQuoteEscaper(text){
    console.log(text);
    return text.replace(/^([\s\t]*["']{1}[^\r\n']*[^\\\r\n]+)(["']{1})([^\r\n']*[^\\\r\n]+)(["']{1})(.*["']{1}.*)$/gim,'$1\\$2$3\\$4$5');
}

function quoteEscape(text){
    return text.replace(/['"]/gim,'\\$&');
}


function runDemo(){
    cssInputField.value = '\/* Default Font *\/\r\np,body,h1,h2,h3,h4,h5,h6 {\r\n    font-family: \'Lato\',sans-serif;\r\n}\r\nh1,h2,h3,h4,h5,h6 {\r\n    font-weight: bold;\r\n}\r\n\/* Main body content styling *\/\r\n.entry-content{\r\n    background-color: #FFF;\r\n    margin-left: 10px;\r\n    margin-right: 10px;\r\n    padding-left: 10px;\r\n    padding-right: 10px;\r\n\tpadding-bottom: 10px;\r\n\tpadding-top: 10px;\r\n    border-radius: 5px;\r\n}';
    generateOutput();
}

// Add event listeners
cssInputField.addEventListener('blur', generateOutput);
cssInputField.addEventListener('change', generateOutput);
cssInputField.addEventListener('keyup', generateOutput);
jsOutputField.addEventListener('click', function (evt) {
    evt.target.select();
});

var clipboard = new ClipboardJS('.copyOutput');

document.querySelector('.button.clear').addEventListener('click', function () {
    cssInputField.value = '';
    generateOutput();
});

removeAllLineBreaksInJSCheckbox.addEventListener('change', function (evt) {
    window.removeAllLineBreaksInJS = !removeAllLineBreaksInJSCheckbox.checked;
    generateOutput();
});

removeAllLineBreaksInStringCheckbox.addEventListener('change', function (evt) {
    window.removeAllLineBreaksInString = !removeAllLineBreaksInStringCheckbox.checked;
    generateOutput();
});

useSingleQuoteCheckbox.addEventListener('change',function(evt){
    window.useSingleQuote = useSingleQuoteCheckbox.checked;
    generateOutput();
})

document.getElementById('demoButton').addEventListener('click',function(evt){
    runDemo();
});

// generate on load
generateOutput();