// Digital Pi - Easy Editor GUI
// v3.7.0

// check for Marketo Editor - add body class for GUI overlay
var EDITOR = $('meta[name*="mkto-force-mobile"]'); // Marketo adds this metatag inside the editor only
var GUI = $(EDITOR).length; 

window.addEventListener('load', function () {
		var EasyEditorHTML = '<div class="EasyEditorMenu"><div class="EasyEditorMenu-Button" title="Easy Editor View Toggle"><i class="fas fa-eye" id="EasyEditorDisplay"></i></div><div class="EasyEditorMenu-Text">Hide the overlay by toggling the [*] Easy Editor variable to "OFF"</div></div>';
		if(GUI > 0){
			$('body').addClass('EasyEditorGUI');
		  // CSS contains stylesheet for EasyEditor GUI
		  var CSS = '<style>.EasyEditorMenu {display:none;} .EasyEditor-on .EasyEditorMenu {display:block;} body.EasyEditorGUI.EasyEditor-on {padding-bottom:40px;} body.EasyEditorGUI.EasyEditor-on .EasyEditorMenu{content:"Hide the overlay by toggling the [*] Easy Editor variable to OFF";width:100%;position:fixed;bottom:0;background-color:rgba(0,0,0,.7);color:white;z-index:1000;text-align:center;font-size:14px;line-height:20px;padding:10px}body.EasyEditorGUI.EasyEditor-on .col-break::before{position:absolute;border-radius:8px;width:26px;height:16px;font-size:9px;line-height:14px;text-align:center;margin-left:-13px;text-transform:uppercase;border:1px solid #888;z-index:1;margin-top:1px}body.EasyEditorGUI.EasyEditor-on .w-0.col-break::before{background-color:#cbcbcb;color:#888}body.EasyEditorGUI.EasyEditor-on .w-100.col-break::before{background-color:#00b73a;color:#fff;border-color:#fff}body.EasyEditorGUI.EasyEditor-on .col-break.w-0::before{content:"off";cursor:help}body.EasyEditorGUI.EasyEditor-on .col-break.w-100::before{content:"on";cursor:help}body.EasyEditorGUI.EasyEditor-on .mktoText,body.EasyEditorGUI.EasyEditor-on .mktoForm,body.EasyEditorGUI.EasyEditor-on .mktoSnippet{border:1px dashed #ececec;min-height:2em} body.EasyEditorGUI.EasyEditor-on .mktoText, body.EasyEditorGUI.EasyEditor-on .mktoForm, body.EasyEditorGUI.EasyEditor-on .mktoSnippet { position:relative;} body.EasyEditorGUI.EasyEditor-on .mktoText:before,body.EasyEditorGUI.EasyEditor-on .mktoForm:before,body.EasyEditorGUI.EasyEditor-on .mktoSnippet:before{content:attr(id);padding:3px 6px;font-size:12px;line-height:16px;position:absolute;right:0px;z-index:3;background-color:#c1e5f9;color:#222}body.EasyEditorGUI.EasyEditor-on .mktoText{border-color:#00b73a}body.EasyEditorGUI.EasyEditor-on .mktoForm{border-color:#5a54a4}body.EasyEditorGUI.EasyEditor-on .mktoSnippet{border-color:#ffce40}body.EasyEditorGUI.EasyEditor-on section, body.EasyEditorGUI.EasyEditor-on header, body.EasyEditorGUI.EasyEditor-on footer{border-top:4px solid #c1e5f9}body.EasyEditorGUI.EasyEditor-on section::before,body.EasyEditorGUI.EasyEditor-on header::before,body.EasyEditorGUI.EasyEditor-on footer::before{content:attr(id);background-color:#c1e5f9;color:#000;position:absolute;padding:0 10px;z-index:100;line-height:24px; margin-top:-1px;}body.EasyEditorGUI.EasyEditor-on .container-fluid .col-break.w-100::before{transform:rotate(270deg);margin-left:-5px;margin-top:7px;}body.EasyEditorGUI.EasyEditor-on form.mktoForm:before {left:0px; right:auto;} /* GUI Visibility Toggle */ body.EasyEditorDisplay-off section::before, body.EasyEditorDisplay-off header::before, body.EasyEditorDisplay-off footer::before, body.EasyEditorDisplay-off .mktoText:before, body.EasyEditorDisplay-off .mktoForm:before, body.EasyEditorDisplay-off .mktoSnippet:before, body.EasyEditorDisplay-off .col-break::before {opacity:0;} body.EasyEditorDisplay-off .mktoText, body.EasyEditorDisplay-off .mktoForm, body.EasyEditorDisplay-off .mktoSnippet {min-height:0 !important; border:0px !important;} body.EasyEditorDisplay-off header, body.EasyEditorDisplay-off section, body.EasyEditorDisplay-off footer { border-width:0px !important;} .EasyEditorMenu-Button:hover i { color: #323232; transform: scale(2);} i#EasyEditorDisplay { transition: ease all .3s; padding: 0px;} .EasyEditorMenu-Button { cursor:pointer; position:absolute; right: 0; background: #c1e5f9; height:100%; top:0; width:40px; line-height:40px; text-align:center; opacity:20%; color:#323232; transition:ease all .3s;} body.EasyEditorGUI.EasyEditor-on form.mktoForm:before {background-color:#5a54a4; color: #fff;} .EasyEditorMenu-Button:hover { opacity:1;} body.EasyEditorGUI .mktoText, body.EasyEditorGUI .mktoForm, body.EasyEditorGUI .mktoSnippet { transition:ease all .5s;} body.EasyEditorGUI.EasyEditor-off .mktoText, body.EasyEditorGUI.EasyEditor-off .mktoForm, body.EasyEditorGUI.EasyEditor-off .mktoSnippet { min-height:0px;} body.EasyEditorGUI.EasyEditor-on .mktoText:hover::before {background-color: #e77519; color: white;} body.EasyEditorGUI.EasyEditor-on .mktoForm:hover::before { background-color: #5a54a4; color: white;} body.EasyEditorGUI.EasyEditor-on .mktoSnippet:hover::before {background-color: #ffce40;} /*SPACER GUI*/ body.EasyEditor-on.EasyEditorGUI:not(.EasyEditorDisplay-off) div[class^=spacer-] {outline:1px dashed rgba(0,0,0,0.1); position:relative; background: repeating-linear-gradient(45deg,rgba(0,0,0,0.025), rgba(0,0,0,0.025) 2%, rgba(255,255,255,0.1) 2%, rgba(255,255,255,0.1) 4%); } body.EasyEditor-on.EasyEditorGUI:not(.EasyEditorDisplay-off) div[class^=spacer-]::after {content:attr(class); position:absolute; width:100%; text-align:center; display:flex; align-items:center; justify-content:center; height:100%; top:0; font-size:0.8em; text-transform:uppercase; color:rgba(0,0,0,0.3); } /*end: SPACER GUI*/</style>'
		  // inject GUI <style> into <head>
		  $('head').append(CSS);
			$('body').append(EasyEditorHTML);
		}
		else{}
})

$(document).on('click','#EasyEditorDisplay', function(){
    $('body').toggleClass('EasyEditorDisplay-off');
    $('#EasyEditorDisplay').toggleClass('fa-eye fa-eye-slash');
});