z_wizardCode.w_wizard = {};
z_wizardCode.w_wizard.a_documentation = `
This one does some of this image cropping stuff.
`;
z_wizardCode.w_wizard.b_code = `
<div id="coin06171" data-js-name="coin06171" data-drag-pull="backgroundColor" data-parent="" data-children="" data-scale="1" data-finished-outline="none" data-outline-colour="grey" data-left="0px" data-top="0px" data-width="384px" data-height="384px" style="position: absolute; z-index: 100250000; user-select: none; transform-origin: left top; transform: scale(1); left: 0px; top: 0px; width: 384px; height: 384px; outline: none;" data-coin-trip="?" data-flow="0"><a data-name="anchor" style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; font-size: 32px; font-family: monospace; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1;"></a><div data-name="main" data-perspective="1536px" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-translate-z="0" style="position: absolute; z-index: 100; overflow: auto; left: 0px; top: 0px; width: 100%; height: 100%; border: none; transform-origin: center center; display: block;"><button data-name="button" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: none; display: none; background-color: transparent; color: rgb(222, 255, 28); text-shadow: black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px; font-size: 24px; font-weight: bold;"></button><div data-name="div" contenteditable="true" style="position: absolute; z-index: 200; left: 0px; top: 0px; width: 100%; height: 100%; box-sizing: border-box; border: none; text-align: justify; background-color: transparent; color: rgb(0, 0, 0); line-height: 1.06; text-indent: 1.12em;"><p><b>Here are some instructions for this Wizard:</b></p><p>The first thing you need to do is get an image into the background of the program. The way to do that is to hold the "ALT" key down and drag the image file in from your file explorer.</p><p>Once you have done that, the hard part is over. Now, if you don't want to remember any more stuff, then just use these Wizardy things here!</p><p><b>If you want to know how to do it even easier:</b> Just hold "SHIFT" and double-click on any rectangle and it will pull a crop out of the background picture.</p><p>When you have one rectangle selected, you can just use "SHIFT+8" to save it as a file.</p><p>The best one here might just be "CUT THEM ALL". That one is going to use every rectangle we have and cut crops from the image into all of them. Then you also have one to "STAMP ALL". The little one in the bottom corner will set the background canvas size.</p><p><br></p><p><b>Best Wishes,</b></p><p><b><br></b></p><p><b>-dckimGUY</b></p></div><img data-name="img" alt="" style="position: absolute; display: none; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; border: none; background-color: transparent;"></div></div>

<div id="coin81875" data-js-name="coin81875" data-parent="coin83904" data-children="" data-finished-outline="none" data-drag-pull="backgroundColor" data-wrapper="undefined" data-outline-colour="grey" data-file-include="a_cutAll.html" data-width="192px" data-height="128px" data-scale="1" style="position: absolute; z-index: 100250200; user-select: none; left: 0px; top: 0px; width: 192px; height: 128px; transform-origin: left top; transform: scale(1); outline: none;" data-angle="0" data-left="0px" data-top="0px" data-coin-trip="?" data-flow="1"><a data-name="anchor" style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; font-size: 32px; font-family: monospace; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1;"></a><div data-name="main" data-perspective="1536px" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-translate-z="0" style="position: absolute; z-index: 100; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%; border: none; transform-origin: center center; display: block;"><button data-name="button" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: none; display: none; background-color: transparent; color: rgb(222, 255, 28); text-shadow: black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px; font-size: 24px; font-weight: bold;"></button><div data-name="div" style="position: absolute; z-index: 200; left: 0px; top: 0px; width: 100%; height: 100%; box-sizing: border-box; border: none; text-align: justify; background-color: transparent; color: rgb(0, 0, 0);"><button class="xqnBTN" style="font: inherit; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;" onclick="cutImagesAll();">CUT THEM ALL</button></div><img data-name="img" alt="" style="position: absolute; display: none; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; border: none; background-color: transparent;"></div></div>

<div id="coin83904" data-js-name="coin83904" data-parent="coin75218" data-children="coin81875" data-finished-outline="none" data-drag-pull="backgroundColor" data-wrapper="undefined" data-outline-colour="grey" data-file-include="d_stampAll.html" data-width="192px" data-height="128px" data-scale="1" style="position: absolute; z-index: 100250300; user-select: none; left: 192px; top: 0px; width: 192px; height: 128px; transform-origin: left top; transform: scale(1); outline: none;" data-angle="0" data-left="192px" data-top="0px" data-coin-trip="?" data-flow="2"><a data-name="anchor" style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; font-size: 32px; font-family: monospace; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1;"></a><div data-name="main" data-perspective="1536px" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-translate-z="0" style="position: absolute; z-index: 100; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%; border: none; transform-origin: center center; display: block;"><button data-name="button" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: none; display: none; background-color: transparent; color: rgb(222, 255, 28); text-shadow: black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px; font-size: 24px; font-weight: bold;"></button><div data-name="div" style="position: absolute; z-index: 200; left: 0px; top: 0px; width: 100%; height: 100%; box-sizing: border-box; border: none; text-align: justify; background-color: transparent; color: rgb(0, 0, 0);"><button class="xqnBTN" style="font: inherit; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;" onclick="
if (utilityLayer0.children.length!=0) {

let ctx = Picture.getContext('2d');

if (Picture.width!=0&amp;&amp;Picture.height!=0) {
for (let j = 0; j &lt; utilityLayer0.children.length; j++) {

       if (utilityLayer0.children[j].lastElementChild.lastElementChild.src!='') {
ctx.drawImage(utilityLayer0.children[j].lastElementChild.lastElementChild, parseInt(utilityLayer0.children[j].style.left), parseInt(utilityLayer0.children[j].style.top), parseInt(utilityLayer0.children[j].style.width), parseInt(utilityLayer0.children[j].style.height));
}

}
}
}
">STAMP ALL</button></div><img data-name="img" alt="" style="position: absolute; display: none; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; border: none; background-color: transparent; transform: rotate(180deg);"></div></div>

<div id="coin70509" data-js-name="coin70509" data-drag-pull="backgroundColor" data-parent="" data-children="" data-scale="1" data-finished-outline="none" data-outline-colour="grey" data-left="32px" data-top="32px" data-width="320px" data-height="320px" style="position: absolute; z-index: 100250100; user-select: none; transform-origin: left top; transform: scale(1); left: 32px; top: 32px; width: 320px; height: 320px; outline: none;" data-coin-trip="?" data-flow="3"><a data-name="anchor" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; font-size: 32px; font-family: monospace; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1;"></a><div data-name="main" data-perspective="1536px" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-translate-z="0" style="position: absolute; z-index: 100; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%; border: none; transform-origin: center center; display: block;"><button data-name="button" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: none; display: none; background-color: transparent; color: rgb(222, 255, 28); text-shadow: black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px; font-size: 24px; font-weight: bold;"></button><div data-name="div" style="position: absolute; z-index: 200; left: 0px; top: 0px; width: 100%; height: 100%; box-sizing: border-box; border: none; text-align: justify; background-color: rgba(0, 0, 255, 0.5); color: rgb(0, 0, 0);"></div><img data-name="img" alt="" style="position: absolute; display: none; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; border: none; background-color: transparent;"></div></div>

<div id="coin75218" data-js-name="coin75218" data-drag-pull="backgroundColor" data-parent="" data-children="coin83904,coin89891" data-finished-outline="none" data-outline-colour="grey" style="position: absolute; transform-origin: left top; transform: scale(1); z-index: 100250700; user-select: none; left: 192px; top: 128px; width: 192px; height: 192px; outline: none;" data-left="192px" data-top="128px" data-width="192px" data-height="192px" data-scale="1" data-angle="0" data-coin-trip="?" data-file-include="c_spaceClickSave.html" data-flow="5"><a data-name="anchor" style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; font-size: 32px; font-family: monospace; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1;"></a><div data-name="main" data-perspective="1536px" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-translate-z="0" style="position: absolute; z-index: 100; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%; border: none; transform-origin: center center; display: block;"><button data-name="button" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: none; display: none; background-color: transparent; color: rgb(222, 255, 28); text-shadow: black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px; font-size: 24px; font-weight: bold;"></button><div data-name="div" style="position: absolute; z-index: 200; left: 0px; top: 0px; width: 100%; height: 100%; box-sizing: border-box; border: none; text-align: justify; background-color: transparent; color: rgb(0, 0, 0);"><button style="font: inherit; width: 100%; height: 100%; margin: 0; padding: 0; border: 4px dashed lime; background-color: transparent; color: lime;" onclick="

const date       =    new Date()                                      ;
const year       =    date.getFullYear()                              ;
const month      =    date.getMonth().toString().padStart(2,'0')      ;
const day        =    date.getDate().toString().padStart(2,'0')       ;
const hour       =    date.getHours().toString().padStart(2,'0')      ;
const minute     =    date.getMinutes().toString().padStart(2,'0')    ;
const second     =    date.getSeconds().toString().padStart(2,'0')    ;

const dateSuffix =    year + '-' + month + '-' + day + '-T' + hour + '-' + minute + '-' + second;

let tmpCan = document.createElement('canvas');
tmpCan.width = parseInt(this.parentNode.parentNode.parentNode.style.width);
tmpCan.height = parseInt(this.parentNode.parentNode.parentNode.style.height);

let ctx = tmpCan.getContext('2d');
ctx.drawImage(Picture, -parseInt(this.parentNode.parentNode.parentNode.style.left), -parseInt(this.parentNode.parentNode.parentNode.style.top), Picture.width, Picture.height);

const dataURL = tmpCan.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'd_image-crop@' + dateSuffix + '.png';
link.click();

">space<br>click<br>SAVE</button></div><img data-name="img" alt="" style="position: absolute; display: none; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; border: none; background-color: transparent;"></div></div>

<div id="coin38095" data-js-name="coin38095" data-drag-pull="backgroundColor" data-parent="" data-children="" data-scale="1" data-finished-outline="none" data-outline-colour="grey" data-left="0px" data-top="320px" data-width="160px" data-height="64px" style="position: absolute; z-index: 100250500; user-select: none; transform-origin: left top; transform: scale(1); left: 0px; top: 320px; width: 160px; height: 64px; outline: none;" data-coin-trip="?" data-file-include="e_eraseBackImage.html" data-flow="6"><a data-name="anchor" style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; font-size: 32px; font-family: monospace; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1;"></a><div data-name="main" data-perspective="1536px" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-translate-z="0" style="position: absolute; z-index: 100; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%; border: none; transform-origin: center center; display: block;"><button data-name="button" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: none; display: none; background-color: transparent; color: rgb(222, 255, 28); text-shadow: black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px; font-size: 24px; font-weight: bold;"></button><div data-name="div" style="position: absolute; z-index: 200; left: 0px; top: 0px; width: 100%; height: 100%; box-sizing: border-box; border: none; text-align: justify; background-color: transparent; color: rgb(0, 0, 0);"><button class="xqnBTN" style="font: inherit; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;" onclick="Picture.width=0; Picture.height=0;">ERASE</button></div><img data-name="img" alt="" style="position: absolute; display: none; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; border: none; background-color: transparent;"></div></div>

<div id="coin59766" data-js-name="coin59766" data-drag-pull="backgroundColor" data-parent="" data-children="" data-scale="1" data-finished-outline="none" data-outline-colour="grey" data-left="160px" data-top="320px" data-width="160px" data-height="64px" style="position: absolute; z-index: 100250600; user-select: none; transform-origin: left top; transform: scale(1); left: 160px; top: 320px; width: 160px; height: 64px; outline: none;" data-coin-trip="?" data-file-include="e_clearBackImage.html" data-flow="7"><a data-name="anchor" style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; font-size: 32px; font-family: monospace; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1;"></a><div data-name="main" data-perspective="1536px" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-translate-z="0" style="position: absolute; z-index: 100; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%; border: none; transform-origin: center center; display: block;"><button data-name="button" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: none; display: none; background-color: transparent; color: rgb(222, 255, 28); text-shadow: black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px; font-size: 24px; font-weight: bold;"></button><div data-name="div" style="position: absolute; z-index: 200; left: 0px; top: 0px; width: 100%; height: 100%; box-sizing: border-box; border: none; text-align: justify; background-color: transparent; color: rgb(0, 0, 0);"><button class="xqnBTN" style="font: inherit; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;" onclick="Picture.width=Picture.width">CLEAR</button></div><img data-name="img" alt="" style="position: absolute; display: none; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; border: none; background-color: transparent;"></div></div>

<div id="coin83376" data-js-name="coin83376" data-drag-pull="backgroundColor" data-parent="" data-children="" data-scale="1" data-finished-outline="none" data-outline-colour="grey" data-left="320px" data-top="320px" data-width="64px" data-height="64px" style="position: absolute; z-index: 100250800; user-select: none; transform-origin: left top; transform: scale(1); left: 320px; top: 320px; width: 64px; height: 64px; outline: none;" data-coin-trip="?" data-file-include="g_setCorner.html" data-flow="8"><a data-name="anchor" style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; font-size: 32px; font-family: monospace; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1;"></a><div data-name="main" data-perspective="1536px" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-translate-z="0" style="position: absolute; z-index: 100; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%; border: none; transform-origin: center center; display: block;"><button data-name="button" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: none; display: none; background-color: transparent; color: rgb(222, 255, 28); text-shadow: black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px; font-size: 24px; font-weight: bold;"></button><div data-name="div" style="position: absolute; z-index: 200; left: 0px; top: 0px; width: 100%; height: 100%; box-sizing: border-box; border: none; text-align: justify; background-color: transparent; color: rgb(0, 0, 0);"><button class="xqnBTN" style="font: inherit; width: 100%; height: 100%; margin: 0; padding: 0; border: 4px solid red; border-radius: 1536px; border-bottom-right-radius: 0px;" onclick="

let ctx = Picture.getContext('2d');

let Picture2 = document.createElement('canvas');
const tmpWidth  = Picture.width;
const tmpHeight = Picture.height;

let ctx2 = Picture2.getContext('2d');
Picture2.width = tmpWidth;
Picture2.height = tmpHeight;

try {
ctx2.drawImage(Picture, 0, 0, tmpWidth, tmpHeight);
} catch { }

Picture.width  = parseInt(this.parentNode.parentNode.parentNode.style.left) + parseInt(this.parentNode.parentNode.parentNode.style.width);
Picture.height = parseInt(this.parentNode.parentNode.parentNode.style.top)  + parseInt(this.parentNode.parentNode.parentNode.style.height);

try {
ctx.drawImage(Picture2, 0, 0, tmpWidth, tmpHeight);
} catch { }

"></button></div><img data-name="img" alt="" style="position: absolute; display: none; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; border: none; background-color: transparent;"></div></div>

<div id="coin88713" data-js-name="coin88713" data-parent="coin76410" data-children="coin20531" data-finished-outline="none" data-drag-pull="backgroundColor" data-wrapper="undefined" data-outline-colour="grey" data-file-include="b_spaceClickCrop.html" data-width="192px" data-height="192px" data-scale="1" style="position: absolute; z-index: 100250799; user-select: none; left: 0px; top: 128px; width: 192px; height: 192px; transform-origin: left top; transform: scale(1); outline: none;" data-angle="0" data-left="0px" data-top="128px" data-coin-trip="?"><a data-name="anchor" style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; font-size: 32px; font-family: monospace; color: rgb(0, 0, 0); text-align: left; background-color: transparent; opacity: 1;"></a><div data-name="main" data-perspective="1536px" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-translate-z="0" style="position: absolute; z-index: 100; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%; border: none; transform-origin: center center; display: block;"><button data-name="button" style="position: absolute; z-index: 300; left: 0px; top: 0px; width: 100%; height: 100%; border: none; display: none; background-color: transparent; color: rgb(222, 255, 28); text-shadow: black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px; font-size: 24px; font-weight: bold;"></button><div data-name="div" style="position: absolute; z-index: 200; left: 0px; top: 0px; width: 100%; height: 100%; box-sizing: border-box; border: none; text-align: justify; background-color: transparent; color: rgb(0, 0, 0);"><button style="font: inherit; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background-color: transparent;" onclick="

let tmpCan = document.createElement('canvas');
tmpCan.width = parseInt(this.parentNode.parentNode.parentNode.style.width);
tmpCan.height = parseInt(this.parentNode.parentNode.parentNode.style.height);

let ctx = tmpCan.getContext('2d');
ctx.drawImage(Picture, -parseInt(this.parentNode.parentNode.parentNode.style.left), -parseInt(this.parentNode.parentNode.parentNode.style.top), Picture.width, Picture.height);

this.parentNode.parentNode.parentNode.lastElementChild.lastElementChild.src = tmpCan.toDataURL('image/png');
this.parentNode.parentNode.parentNode.lastElementChild.lastElementChild.style.display = '';

this.innerHTML='';

">space<br>click<br>CROP</button></div><img data-name="img" alt="" style="position: absolute; display: none; z-index: 100; left: 0px; top: 0px; width: 100%; height: 100%; border: none; background-color: transparent;"></div></div>


`;
