MediaWiki

Common.js: Difference between revisions

From Grouse House Wiki

No edit summary
No edit summary
 
(88 intermediate revisions by the same user not shown)
Line 20: Line 20:
/* Dropdown menus */
/* Dropdown menus */


function selectVariant(enemy, variant1, variant2, variant3, variant4) {   
function selectVariant(enemy, variant1, variant2, variant3, variant4, variant5, variant6, variant7, variant8, variant9, variant10, variant11, variant12) {   
var dropdownName = enemy + 'Variants';
var dropdownName = enemy + 'Variants';
var resultName = enemy + 'ChosenVariant';
var resultName = enemy + 'ChosenVariant';
Line 27: Line 27:
var enemyVariant3 = enemy + variant3;
var enemyVariant3 = enemy + variant3;
var enemyVariant4 = enemy + variant4;
var enemyVariant4 = enemy + variant4;
var enemyVariant5 = enemy + variant5;
var enemyVariant6 = enemy + variant6;
var enemyVariant7 = enemy + variant7;
var enemyVariant8 = enemy + variant8;
var enemyVariant9 = enemy + variant9;
var enemyVariant10 = enemy + variant10;
var enemyVariant11 = enemy + variant11;
var enemyVariant12 = enemy + variant12;
var variant1div = document.getElementById(enemyVariant1);
var variant1div = document.getElementById(enemyVariant1);
var variant2div = document.getElementById(enemyVariant2);
var variant2div = document.getElementById(enemyVariant2);
var variant3div = document.getElementById(enemyVariant3);
var variant3div = document.getElementById(enemyVariant3);
var variant4div = document.getElementById(enemyVariant4);
var variant4div = document.getElementById(enemyVariant4);
var variant5div = document.getElementById(enemyVariant5);
var variant6div = document.getElementById(enemyVariant6);
var variant7div = document.getElementById(enemyVariant7);
var variant8div = document.getElementById(enemyVariant8);
var variant9div = document.getElementById(enemyVariant9);
var variant10div = document.getElementById(enemyVariant10);
var variant11div = document.getElementById(enemyVariant11);
var variant12div = document.getElementById(enemyVariant12);
var dropdown = document.getElementById(dropdownName);  
var dropdown = document.getElementById(dropdownName);  


Line 39: Line 55:
     variant3div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant2) {
} else if(dropdown.options[dropdown.selectedIndex].text === variant2) {
     document.getElementById(resultName).value = enemyVariant2;
     document.getElementById(resultName).value = enemyVariant2;
Line 45: Line 69:
     variant3div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant3) {
} else if(dropdown.options[dropdown.selectedIndex].text === variant3) {
     document.getElementById(resultName).value = enemyVariant3;
     document.getElementById(resultName).value = enemyVariant3;
Line 51: Line 83:
     variant3div.style.display = "block";
     variant3div.style.display = "block";
     variant4div.style.display = "none";
     variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant4) {
} else if(dropdown.options[dropdown.selectedIndex].text === variant4) {
     document.getElementById(resultName).value = enemyVariant4;
     document.getElementById(resultName).value = enemyVariant4;
Line 57: Line 97:
     variant3div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "block";
     variant4div.style.display = "block";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant5) {
    document.getElementById(resultName).value = enemyVariant4;
    variant1div.style.display = "none";
    variant2div.style.display = "none";
    variant3div.style.display = "none";
    variant4div.style.display = "none";
    variant5div.style.display = "block";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant6) {
    document.getElementById(resultName).value = enemyVariant4;
    variant1div.style.display = "none";
    variant2div.style.display = "none";
    variant3div.style.display = "none";
    variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "block";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant7) {
    document.getElementById(resultName).value = enemyVariant4;
    variant1div.style.display = "none";
    variant2div.style.display = "none";
    variant3div.style.display = "none";
    variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "block";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant8) {
    document.getElementById(resultName).value = enemyVariant4;
    variant1div.style.display = "none";
    variant2div.style.display = "none";
    variant3div.style.display = "none";
    variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "block";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant9) {
    document.getElementById(resultName).value = enemyVariant4;
    variant1div.style.display = "none";
    variant2div.style.display = "none";
    variant3div.style.display = "none";
    variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "block";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant10) {
    document.getElementById(resultName).value = enemyVariant4;
    variant1div.style.display = "none";
    variant2div.style.display = "none";
    variant3div.style.display = "none";
    variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "block";
    variant11div.style.display = "none";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant11) {
    document.getElementById(resultName).value = enemyVariant4;
    variant1div.style.display = "none";
    variant2div.style.display = "none";
    variant3div.style.display = "none";
    variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "block";
    variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant12) {
    document.getElementById(resultName).value = enemyVariant4;
    variant1div.style.display = "none";
    variant2div.style.display = "none";
    variant3div.style.display = "none";
    variant4div.style.display = "none";
    variant5div.style.display = "none";
    variant6div.style.display = "none";
    variant7div.style.display = "none";
    variant8div.style.display = "none";
    variant9div.style.display = "none";
    variant10div.style.display = "none";
    variant11div.style.display = "none";
    variant12div.style.display = "block";
}
}
}
}
Line 146: Line 306:
/* Decor Previewer Garbage */
/* Decor Previewer Garbage */


var modal = document.getElementById('decorModal');
/* Establish Variables */
var modal = document.getElementById('decorModalV1');
var modalclose = document.getElementsByClassName('modalclose')[0];
var modalclose = document.getElementsByClassName('modalclose')[0];
var previewbutton = document.getElementById('previewbutton');
var modaldropdown = document.getElementById('previewoptions');
var modaldropdown = document.getElementById('previewoptions');
var modalpreview = document.getElementById('decorpreviewimg');
var modalpreview = document.getElementById('decorpreviewimg');
var decorpreviewbehind = document.getElementById('behinddecorpreviewimg');
var decorpreview = document.getElementById('decorpreview');
var decorpreview = document.getElementById('decorpreview');
var backbutton = document.getElementById('back');
var previewinput = document.getElementById('previewinput');
var previewinput = document.getElementById('previewinput');
var decorinfo = document.getElementById('decorinformation');
var basewolf = document.getElementById('previewbasewolf');
var basewolf = document.getElementById('previewbasewolf');
var decortitle = document.getElementById('decorname');
var decortitle = document.getElementById('decorname');
Line 161: Line 318:
var checkboxes = document.getElementById('checkboxes');
var checkboxes = document.getElementById('checkboxes');
var backgroundtoggle = document.getElementById('backgroundtoggle');
var backgroundtoggle = document.getElementById('backgroundtoggle');
var lightbasetoggle = document.getElementById('lightbasetoggle');
var darkbasetoggle = document.getElementById('darkbasetoggle');
var darkbasetoggle = document.getElementById('darkbasetoggle');
var wolftoggle = document.getElementById('wolftoggle');
var previewbackground = document.getElementById('previewbackground');
var previewbackground = document.getElementById('previewbackground');
var decorthumbnail = document.getElementById('decorthumbnail');
var obtentionheader = document.getElementById('obtentionheader');
var obtention = document.getElementById('decorobtention');


/* Image Variables */
var backgroundimage = "/images/d/dd/Default_Daytime.png";
var backgroundnone = "/images/d/d8/Previewbackground_none.png";
var adultlight = "/images/4/47/Basewolf_adult.png";
var adultdark = "/images/e/e2/Basewolfdark_adult.png";
var motherlylight = "/images/d/d7/Basewolf_motherly.png";
var motherlydark = "/images/e/e9/Basewolfdark_motherly.png";
var relaxedlight = "/images/6/67/Basewolf_relaxed.png";
var relaxeddark = "/images/d/de/Basewolfdark_relaxed.png";
var sentinellight = "/images/e/e0/Basewolf_sentinel.png";
var sentineldark = "/images/c/c7/Basewolfdark_sentinel.png";
var adollight = "/images/7/78/Basewolf_adolescent.png";
var adoldark = "/images/4/48/Basewolfdark_adolescent.png";
var puplight = "/images/0/09/Basewolf_puppy.png";
var pupdark = "/images/2/29/Basewolfdark_pup.png";
var brachylight = "/images/3/31/Basewolf_brachy.png";
var brachydark = "/images/f/f1/Basewolfdark_brachycephaly.png";
var conjoinedlight = "/images/4/46/Basewolf_conjoinedtwins.png";
var conjoineddark = "/images/3/3a/Basewolfdark_conjoined.png";
var pupnewbornlight = "/images/7/7f/Basewolf_newbornpuppy.png";
var pupnewborndark = "/images/b/b6/Basewolfdark_pupnewborn.png";
var polyclight = "/images/b/b5/Basewolf_polycephaly.png";
var polycdark = "/images/e/e0/Basewolfdark_polycephaly.png";
var polymlight = "/images/6/6a/Basewolf_polymelia.png";
var polymdark = "/images/a/a4/Basewolfdark_polymelia.png";
var sirenlight = "/images/3/39/Basewolf_sirenomelia.png";
var sirendark = "/images/c/c6/Basewolfdark_siren.png";
var pupyounglight = "/images/0/0c/Basewolf_youngpuppy.png";
var pupyoungdark = "/images/2/25/Basewolfdark_pupyoung.png";
var nowolf = "/images/d/d8/Previewbackground_none.png";


function decorModal(decorname, decorthumb, decordesc, decorobt, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) {
/* Create Canvas */
    modal.style.display = "block";
var canvas = document.getElementById("decorpreview");
    modalpreview.src = adulturl;
var ctx = canvas.getContext("2d");
    basewolf.src = "/images/4/47/Basewolf_adult.png";
var decorImage = new Image();
var wolfImage = new Image();
var backgroundImage = new Image();


    decortitle.innerHTML = decorname;
function decorModalV1(decorname, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) {
    decorinfo.innerHTML = decordesc;
    decorthumbnail.src = decorthumb;
    decorobtention.innerHTML = decorobt;


    previewbutton.addEventListener("click", function() {
/* Display all content when modal is opened */
    modalpreview.style.display = "block";
     modal.style.display = "block";
     backbutton.style.display = "block";
     previewinput.style.display = "block";
     previewinput.style.display = "block";
     decorpreview.style.display = "block";
     decorpreview.style.display = "block";
     togglemenu.style.display = "block";
     togglemenu.style.display = "block";
    decorthumbnail.style.display = "none";
    obtentionheader.style.display = "none";
    obtention.style.display = "none";
    decorinformation.style.display = "none";
    previewbutton.style.display = "none";
    });


     backbutton.addEventListener("click", function() {
     decortitle.innerHTML = decorname; /* Insert decor name */
    modalpreview.style.display = "none";
 
    backbutton.style.display = "none";
/* Input default image */
    previewinput.style.display = "none";
 
    decorpreview.style.display = "none";
backgroundImage.src = backgroundimage;
    togglemenu.style.display = "none";
backgroundImage.onload = function() {
    decorthumbnail.style.display = "block";
  canvas.width = backgroundImage.width;
    obtentionheader.style.display = "block";
  canvas.height = backgroundImage.height;
    obtention.style.display = "block";
  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
    decorinformation.style.display = "block";
  wolfImage.src = "/images/4/47/Basewolf_adult.png";
    previewbutton.style.display = "block";
  wolfImage.onload = function() {
    });
      ctx.drawImage(wolfImage, 0, 0, 640, 500);
      decorImage.src = adulturl;
      decorImage.onload = function() {
        ctx.drawImage(decorImage, 0, 0, 640, 500);
        var img = canvas.toDataURL("image/png");
        document.write('<img src="' + img + '"/>');
  }
}
}
 
/* Check dropdown and checkboxes and remake canvas */


     modaldropdown.addEventListener("change", function() {
     modaldropdown.addEventListener("change", function() {
     if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
     if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
      modalpreview.src = adulturl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/e/e2/Basewolfdark_adult.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/4/47/Basewolf_adult.png";
      }
      }
      if (darkbasetoggle.checked) {
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
        wolfImage.src = adultdark;
      modalpreview.src = motherlyurl;
      } else if (wolftoggle.checked) {
      if (darkbasetoggle.checked) {
        wolfImage.src = nowolf;
      basewolf.src = "/images/e/e9/Basewolfdark_motherly.png";
      } else {
      } else {
        wolfImage.src = adultlight;
      basewolf.src = "/images/d/d7/Basewolf_motherly.png";
      }
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = adulturl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
  } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
      if (backgroundtoggle.checked) {
        backgroundImage.src = backgroundnone;
      } else {
        backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = motherlydark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = motherlylight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = motherlyurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
      modalpreview.src = relaxedurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/d/de/Basewolfdark_relaxed.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/6/67/Basewolf_relaxed.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = relaxeddark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = relaxedlight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = relaxedurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
      modalpreview.src = sentinelurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/c/c7/Basewolfdark_sentinel.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/e/e0/Basewolf_sentinel.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = sentineldark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = sentinellight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = sentinelurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
      modalpreview.src = adolurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/4/48/Basewolfdark_adolescent.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/7/78/Basewolf_adolescent.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = adoldark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = adollight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = adolurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
      modalpreview.src = pupurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/2/29/Basewolfdark_pup.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/0/09/Basewolf_puppy.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = pupdark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = puplight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
      modalpreview.src = pupbrachyurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/f/f1/Basewolfdark_brachycephaly.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/3/31/Basewolf_brachy.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = brachydark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = brachylight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupbrachyurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
      modalpreview.src = pupconjoinedurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/3/3a/Basewolfdark_conjoined.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/4/46/Basewolf_conjoinedtwins.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = conjoineddark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = conjoinedlight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupconjoinedurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
      modalpreview.src = pupnewbornurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/b/b6/Basewolfdark_pupnewborn.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/7/7f/Basewolf_newbornpuppy.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = pupnewborndark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = pupnewbornlight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupnewbornurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
      modalpreview.src = puppolycurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/e/e0/Basewolfdark_polycephaly.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/b/b5/Basewolf_polycephaly.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = polycdark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = polyclight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = puppolycurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
      modalpreview.src = puppolymurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/a/a4/Basewolfdark_polymelia.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/6/6a/Basewolf_polymelia.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = polymdark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = polymlight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = puppolymurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
      modalpreview.src = pupsirenurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/c/c6/Basewolfdark_siren.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/3/39/Basewolf_sirenomelia.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = sirendark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = sirenlight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupsirenurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
     } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
      modalpreview.src = pupyoungurl;
      if (backgroundtoggle.checked) {
      if (darkbasetoggle.checked) {
        backgroundImage.src = backgroundnone;
      basewolf.src = "/images/2/25/Basewolfdark_pupyoung.png";
      } else {
      } else {
        backgroundImage.src = backgroundimage;
      basewolf.src = "/images/0/0c/Basewolf_youngpuppy.png";
      }
      }
      if (darkbasetoggle.checked) {
        wolfImage.src = pupyoungdark;
      } else if (wolftoggle.checked) {
        wolfImage.src = nowolf;
      } else {
        wolfImage.src = pupyounglight;
      }
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
        ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupyoungurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
        }
      }
     }  
     }  
     });
     });


    checkboxesbutton.addEventListener("click", function() {
  checkboxesbutton.addEventListener("click", function() {
       if (checkboxes.style.display === "none") {
       if (checkboxes.style.display === "none") {
           checkboxes.style.display = "block";
           checkboxes.style.display = "block";
      } else {
      } else {
           checkboxes.style.display = "none";
           checkboxes.style.display = "none";
    }    });
      }  
   });




    darkbasetoggle.addEventListener("click", function() {
  darkbasetoggle.addEventListener("onclick", function() {
    if (darkbasetoggle.checked) {
      if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
      if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
        if (backgroundtoggle.checked) {
      basewolf.src = "/images/e/e2/Basewolfdark_adult.png";
            backgroundImage.src = backgroundnone;
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Select a stage from the options below") {
        } else {
      basewolf.src = "/images/e/e2/Basewolfdark_adult.png";
            backgroundImage.src = backgroundimage;
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
        }
      basewolf.src = "/images/e/e9/Basewolfdark_motherly.png";
        if (darkbasetoggle.checked) {
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
            wolfImage.src = adultdark;
      basewolf.src = "/images/d/de/Basewolfdark_relaxed.png";
        } else if (wolftoggle.checked) {
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
            wolfImage.src = nowolf;
      basewolf.src = "/images/c/c7/Basewolfdark_sentinel.png";
        } else {
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
            wolfImage.src = adultlight;
      basewolf.src = "/images/4/48/Basewolfdark_adolescent.png";
        }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
        backgroundImage.onload = function() {
      basewolf.src = "/images/2/29/Basewolfdark_pup.png";
            canvas.width = backgroundImage.width;
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
            canvas.height = backgroundImage.height;
      basewolf.src = "/images/f/f1/Basewolfdark_brachycephaly.png";
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
              wolfImage.onload = function() {
      basewolf.src = "/images/3/3a/Basewolfdark_conjoined.png";
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
              decorImage.src = adulturl;
      basewolf.src = "/images/b/b6/Basewolfdark_pupnewborn.png";
              decorImage.onload = function() {
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
      basewolf.src = "/images/e/e0/Basewolfdark_polycephaly.png";
              var img = canvas.toDataURL("image/png");
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
              document.write('<img src="' + img + '"/>');
      basewolf.src = "/images/a/a4/Basewolfdark_polymelia.png";
              }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
            }
      basewolf.src = "/images/c/c6/Basewolfdark_siren.png";
        }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
      basewolf.src = "/images/2/25/Basewolfdark_pupyoung.png";
        if (backgroundtoggle.checked) {
    }  
            backgroundImage.src = backgroundnone;
    } else {
        } else {
    if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
            backgroundImage.src = backgroundimage;
      basewolf.src = "/images/4/47/Basewolf_adult.png";
        }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Select a stage from the options below") {
        if (darkbasetoggle.checked) {
      basewolf.src = "/images/4/47/Basewolf_adult.png";
            wolfImage.src = motherlydark;
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
        } else if (wolftoggle.checked) {
      basewolf.src = "/images/d/d7/Basewolf_motherly.png";
            wolfImage.src = nowolf;
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
        } else {
      basewolf.src = "/images/6/67/Basewolf_relaxed.png";
            wolfImage.src = motherlylight;
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
        }
      basewolf.src = "/images/e/e0/Basewolf_sentinel.png";
        backgroundImage.onload = function() {
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
            canvas.width = backgroundImage.width;
      basewolf.src = "/images/7/78/Basewolf_adolescent.png";
            canvas.height = backgroundImage.height;
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
      basewolf.src = "/images/0/09/Basewolf_puppy.png";
              wolfImage.onload = function() {
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
      basewolf.src = "/images/3/31/Basewolf_brachy.png";
              decorImage.src = motherlyurl;
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
              decorImage.onload = function() {
      basewolf.src = "/images/4/46/Basewolf_conjoinedtwins.png";
              ctx.drawImage(decorImage, 0, 0, 640, 500);
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
              var img = canvas.toDataURL("image/png");
      basewolf.src = "/images/7/7f/Basewolf_newbornpuppy.png";
              document.write('<img src="' + img + '"/>');
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
              }
      basewolf.src = "/images/b/b5/Basewolf_polycephaly.png";
            }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
        }
      basewolf.src = "/images/6/6a/Basewolf_polymelia.png";
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
        if (backgroundtoggle.checked) {
      basewolf.src = "/images/3/39/Basewolf_sirenomelia.png";
            backgroundImage.src = backgroundnone;
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
        } else {
      basewolf.src = "/images/0/0c/Basewolf_youngpuppy.png";
            backgroundImage.src = backgroundimage;
    }  
        }
    }
        if (darkbasetoggle.checked) {
    });
            wolfImage.src = relaxeddark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = relaxedlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = relaxedurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = sentineldark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = sentinellight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = sentinelurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = adoldark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = adollight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = adolurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = pupdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = puplight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = brachydark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = brachylight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupbrachyurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = conjoineddark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = conjoinedlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupconjoinedurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = pupnewborndark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = pupnewbornlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupnewbornurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = polycdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = polyclight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = puppolycurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = polymdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = polymlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = puppolymurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = sirendark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = sirenlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupsirenurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = pupyoungdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = pupyounglight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupyoungurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      }
  });


    backgroundtoggle.addEventListener("click", function() {
  lightbasetoggle.addEventListener("onclick", function() {
      if (backgroundtoggle.checked) {
      if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
      previewbackground.src = "/images/2/21/Background_default.png";
        if (backgroundtoggle.checked) {
      } else {
            backgroundImage.src = backgroundnone;
      previewbackground.src = "/images/b/b5/Placeholderbackground.png";
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = adultdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = adultlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = adulturl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = motherlydark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = motherlylight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = motherlyurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = relaxeddark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = relaxedlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = relaxedurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = sentineldark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = sentinellight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = sentinelurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = adoldark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = adollight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = adolurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = pupdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = puplight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = brachydark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = brachylight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupbrachyurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = conjoineddark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = conjoinedlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupconjoinedurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = pupnewborndark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = pupnewbornlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupnewbornurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = polycdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = polyclight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = puppolycurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = polymdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = polymlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = puppolymurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = sirendark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = sirenlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupsirenurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = pupyoungdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = pupyounglight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupyoungurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
       }
       }
    });
  });
}


function decorModalBehind(decorname, decorthumb, decordesc, decorobt, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) {
  wolftoggle.addEventListener("onclick", function() {
    modal.style.display = "block";
      if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
    decorpreviewbehind.src = adulturl;
        if (backgroundtoggle.checked) {
    basewolf.src = "/images/4/47/Basewolf_adult.png";
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = adultdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = adultlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = adulturl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = motherlydark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = motherlylight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = motherlyurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = relaxeddark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = relaxedlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = relaxedurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = sentineldark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = sentinellight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = sentinelurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = adoldark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = adollight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = adolurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = pupdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = puplight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = brachydark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = brachylight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupbrachyurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = conjoineddark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = conjoinedlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupconjoinedurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = pupnewborndark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = pupnewbornlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupnewbornurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = polycdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = polyclight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = puppolycurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = polymdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = polymlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = puppolymurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = sirendark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = sirenlight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupsirenurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
        if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
        } else {
            backgroundImage.src = backgroundimage;
        }
        if (darkbasetoggle.checked) {
            wolfImage.src = pupyoungdark;
        } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
        } else {
            wolfImage.src = pupyounglight;
        }
        backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
              decorImage.src = pupyoungurl;
              decorImage.onload = function() {
              ctx.drawImage(decorImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
              }
            }
        }
      }
  });


     decortitle.innerHTML = decorname;
     backgroundtoggle.addEventListener("click", function() {
    decorinfo.innerHTML = decordesc;
        if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
    decorthumbnail.src = decorthumb;
            if (backgroundtoggle.checked) {
    decorobtention.innerHTML = decorobt;
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = adultdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = adultlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = adulturl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = motherlydark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = motherlylight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = motherlyurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = relaxeddark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = relaxedlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = relaxedurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = sentineldark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = sentinellight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = sentinelurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = adoldark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = adollight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = adolurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = pupdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = puplight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = brachydark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = brachylight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupbrachyurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = conjoineddark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = conjoinedlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupconjoinedurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = pupnewborndark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = pupnewbornlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupnewbornurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = polycdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = polyclight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = puppolycurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = polymdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = polymlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = puppolymurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = sirendark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = sirenlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupsirenurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = pupyoungdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = pupyounglight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupyoungurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
              }
            }
        }
      });
  };


     previewbutton.addEventListener("click", function() {
     function decorModalBehindV1(decorname, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) {
    modalpreview.style.display = "block";
    backbutton.style.display = "block";
    previewinput.style.display = "block";
    decorpreview.style.display = "block";
    togglemenu.style.display = "block";
    decorthumbnail.style.display = "none";
    obtentionheader.style.display = "none";
    obtention.style.display = "none";
    decorinformation.style.display = "none";
    previewbutton.style.display = "none";
    });


    backbutton.addEventListener("click", function() {
      /* Display all content when modal is opened */
    modalpreview.style.display = "none";
          modal.style.display = "block";
    backbutton.style.display = "none";
          previewinput.style.display = "block";
    previewinput.style.display = "none";
          decorpreview.style.display = "block";
    decorpreview.style.display = "none";
          togglemenu.style.display = "block";
    togglemenu.style.display = "none";
     
    decorthumbnail.style.display = "block";
          decortitle.innerHTML = decorname; /* Insert decor name */
    obtentionheader.style.display = "block";
     
    obtention.style.display = "block";
      /* Input default image */
    decorinformation.style.display = "block";
     
    previewbutton.style.display = "block";
      backgroundImage.src = backgroundimage;
    });
      backgroundImage.onload = function() {
        canvas.width = backgroundImage.width;
        canvas.height = backgroundImage.height;
        ctx.drawImage(backgroundImage, 0, 0, 640, 500);
        decorImage.src = adulturl;
        decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            wolfImage.src = "/images/4/47/Basewolf_adult.png";
            wolfImage.onload = function() {
              ctx.drawImage(wolfImage, 0, 0, 640, 500);
              var img = canvas.toDataURL("image/png");
              document.write('<img src="' + img + '"/>');
            }
        }
      }
     
      /* Check dropdown and checkboxes and remake canvas */
     
          modaldropdown.addEventListener("change", function() {
          if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = adultdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = adultlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = adulturl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
        } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = motherlydark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = motherlylight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = motherlyurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = relaxeddark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = relaxedlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = relaxedurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = sentineldark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = sentinellight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = sentinelurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = adoldark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = adollight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = adolurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = pupdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = puplight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = pupurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = brachydark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = brachylight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = pupbrachyurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = conjoineddark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = conjoinedlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = pupconjoinedurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = pupnewborndark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = pupnewbornlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = pupnewbornurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = polycdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = polyclight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = puppolycurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = polymdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = polymlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = puppolymurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = sirendark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = sirenlight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = pupsirenurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
            if (backgroundtoggle.checked) {
              backgroundImage.src = backgroundnone;
            } else {
              backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
              wolfImage.src = pupyoungdark;
            } else if (wolftoggle.checked) {
              wolfImage.src = nowolf;
            } else {
              wolfImage.src = pupyounglight;
            }
            backgroundImage.onload = function() {
              canvas.width = backgroundImage.width;
              canvas.height = backgroundImage.height;
              ctx.drawImage(backgroundImage, 0, 0, 640, 500);
              decorImage.src = pupyoungurl;
              decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                    var img = canvas.toDataURL("image/png");
                    document.write('<img src="' + img + '"/>');
                  }
              }
            }
          }
          });
     
        checkboxesbutton.addEventListener("click", function() {
            if (checkboxes.style.display === "none") {
                checkboxes.style.display = "block";
            } else {
                checkboxes.style.display = "none";
            }   
        });
     
     
        darkbasetoggle.addEventListener("onclick", function() {
            if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = adultdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = adultlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adulturl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = motherlydark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = motherlylight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = motherlyurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = relaxeddark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = relaxedlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = relaxedurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = sentineldark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = sentinellight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = sentinelurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = adoldark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = adollight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adolurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = pupdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = puplight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = brachydark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = brachylight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupbrachyurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = conjoineddark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = conjoinedlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupconjoinedurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = pupnewborndark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = pupnewbornlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupnewbornurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = polycdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = polyclight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolycurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = polymdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = polymlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolymurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = sirendark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = sirenlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupsirenurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = pupyoungdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = pupyounglight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupyoungurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            }
        });
     
        lightbasetoggle.addEventListener("onclick", function() {
            if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = adultdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = adultlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adulturl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = motherlydark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = motherlylight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = motherlyurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = relaxeddark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = relaxedlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = relaxedurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = sentineldark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = sentinellight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = sentinelurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = adoldark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = adollight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adolurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = pupdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = puplight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = brachydark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = brachylight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupbrachyurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = conjoineddark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = conjoinedlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupconjoinedurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = pupnewborndark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = pupnewbornlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupnewbornurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = polycdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = polyclight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolycurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = polymdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = polymlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolymurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = sirendark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = sirenlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupsirenurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = pupyoungdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = pupyounglight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupyoungurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            }
        });
     
        wolftoggle.addEventListener("onclick", function() {
            if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = adultdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = adultlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adulturl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = motherlydark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = motherlylight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = motherlyurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = relaxeddark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = relaxedlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = relaxedurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = sentineldark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = sentinellight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = sentinelurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = adoldark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = adollight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adolurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = pupdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = puplight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = brachydark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = brachylight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupbrachyurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = conjoineddark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = conjoinedlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupconjoinedurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = pupnewborndark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = pupnewbornlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupnewbornurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = polycdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = polyclight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolycurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = polymdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = polymlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolymurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = sirendark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = sirenlight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupsirenurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
              if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
              } else {
                  backgroundImage.src = backgroundimage;
              }
              if (darkbasetoggle.checked) {
                  wolfImage.src = pupyoungdark;
              } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
              } else {
                  wolfImage.src = pupyounglight;
              }
              backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupyoungurl;
                  decorImage.onload = function() {
                    ctx.drawImage(decorImage, 0, 0, 640, 500);
                    wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                    }
                  }
              }
            }
        });
     
          backgroundtoggle.addEventListener("click", function() {
              if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = adultdark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = adultlight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = adulturl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = motherlydark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = motherlylight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = motherlyurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = relaxeddark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = relaxedlight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = relaxedurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = sentineldark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = sentinellight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = sentinelurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = adoldark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = adollight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = adolurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = pupdark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = puplight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = brachydark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = brachylight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupbrachyurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = conjoineddark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = conjoinedlight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupconjoinedurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = pupnewborndark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = pupnewbornlight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupnewbornurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = polycdark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = polyclight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = puppolycurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = polymdark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = polymlight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = puppolymurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = sirendark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = sirenlight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupsirenurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
                  if (backgroundtoggle.checked) {
                    backgroundImage.src = backgroundnone;
                  } else {
                    backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                    wolfImage.src = pupyoungdark;
                  } else if (wolftoggle.checked) {
                    wolfImage.src = nowolf;
                  } else {
                    wolfImage.src = pupyounglight;
                  }
                  backgroundImage.onload = function() {
                    canvas.width = backgroundImage.width;
                    canvas.height = backgroundImage.height;
                    ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                    ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupyoungurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                    }
                  }
              }
            });
        };


    modaldropdown.addEventListener("change", function() {
    if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
      decorpreviewbehind.src = adulturl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/e/e2/Basewolfdark_adult.png";
      } else {
      basewolf.src = "/images/4/47/Basewolf_adult.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
      decorpreviewbehind.src = motherlyurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/d/d7/Basewolf_motherly.png";
      } else {
      basewolf.src = "/images/d/d7/Basewolf_motherly.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
      decorpreviewbehind.src = relaxedurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/6/67/Basewolf_relaxed.png";
      } else {
      basewolf.src = "/images/6/67/Basewolf_relaxed.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
      decorpreviewbehind.src = sentinelurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/e/e0/Basewolf_sentinel.png";
      } else {
      basewolf.src = "/images/e/e0/Basewolf_sentinel.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
      decorpreviewbehind.src = adolurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/7/78/Basewolf_adolescent.png";
      } else {
      basewolf.src = "/images/7/78/Basewolf_adolescent.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
      decorpreviewbehind.src = pupurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/0/09/Basewolf_puppy.png";
      } else {
      basewolf.src = "/images/0/09/Basewolf_puppy.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
      decorpreviewbehind.src = pupbrachyurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/3/31/Basewolf_brachy.png";
      } else {
      basewolf.src = "/images/3/31/Basewolf_brachy.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
      decorpreviewbehind.src = pupconjoinedurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/4/46/Basewolf_conjoinedtwins.png";
      } else {
      basewolf.src = "/images/4/46/Basewolf_conjoinedtwins.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
      decorpreviewbehind.src = pupnewbornurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/7/7f/Basewolf_newbornpuppy.png";
      } else {
      basewolf.src = "/images/7/7f/Basewolf_newbornpuppy.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
      decorpreviewbehind.src = puppolycurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/b/b5/Basewolf_polycephaly.png";
      } else {
      basewolf.src = "/images/b/b5/Basewolf_polycephaly.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
      decorpreviewbehind.src = puppolymurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/6/6a/Basewolf_polymelia.png";
      } else {
      basewolf.src = "/images/6/6a/Basewolf_polymelia.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
      decorpreviewbehind.src = pupsirenurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/3/39/Basewolf_sirenomelia.png";
      } else {
      basewolf.src = "/images/3/39/Basewolf_sirenomelia.png";
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
      decorpreviewbehind.src = pupyoungurl;
      if (darkbasetoggle.checked) {
      basewolf.src = "/images/0/0c/Basewolf_youngpuppy.png";
      } else {
      basewolf.src = "/images/0/0c/Basewolf_youngpuppy.png";
      }
    }
    });
    checkboxesbutton.addEventListener("click", function() {
      if (checkboxes.style.display === "none") {
          checkboxes.style.display = "block";
      } else {
          checkboxes.style.display = "none";
    }    });
    darkbasetoggle.addEventListener("click", function() {
    if (darkbasetoggle.checked) {
      if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
      basewolf.src = "/images/e/e2/Basewolfdark_adult.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Select a stage from the options below") {
      basewolf.src = "/images/e/e2/Basewolfdark_adult.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
      basewolf.src = "/images/d/d7/Basewolf_motherly.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
      basewolf.src = "/images/6/67/Basewolf_relaxed.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
      basewolf.src = "/images/e/e0/Basewolf_sentinel.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
      basewolf.src = "/images/7/78/Basewolf_adolescent.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
      basewolf.src = "/images/0/09/Basewolf_puppy.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
      basewolf.src = "/images/3/31/Basewolf_brachy.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
      basewolf.src = "/images/4/46/Basewolf_conjoinedtwins.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
      basewolf.src = "/images/7/7f/Basewolf_newbornpuppy.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
      basewolf.src = "/images/b/b5/Basewolf_polycephaly.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
      basewolf.src = "/images/6/6a/Basewolf_polymelia.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
      basewolf.src = "/images/3/39/Basewolf_sirenomelia.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
      basewolf.src = "/images/0/0c/Basewolf_youngpuppy.png";
    }
    } else {
    if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
      basewolf.src = "/images/4/47/Basewolf_adult.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Select a stage from the options below") {
      basewolf.src = "/images/4/47/Basewolf_adult.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
      basewolf.src = "/images/d/d7/Basewolf_motherly.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
      basewolf.src = "/images/6/67/Basewolf_relaxed.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
      basewolf.src = "/images/e/e0/Basewolf_sentinel.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
      basewolf.src = "/images/7/78/Basewolf_adolescent.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
      basewolf.src = "/images/0/09/Basewolf_puppy.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
      basewolf.src = "/images/3/31/Basewolf_brachy.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
      basewolf.src = "/images/4/46/Basewolf_conjoinedtwins.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
      basewolf.src = "/images/7/7f/Basewolf_newbornpuppy.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
      basewolf.src = "/images/b/b5/Basewolf_polycephaly.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
      basewolf.src = "/images/6/6a/Basewolf_polymelia.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
      basewolf.src = "/images/3/39/Basewolf_sirenomelia.png";
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
      basewolf.src = "/images/0/0c/Basewolf_youngpuppy.png";
    }
    }
    });
    backgroundtoggle.addEventListener("click", function() {
      if (backgroundtoggle.checked) {
      previewbackground.src = "/images/2/21/Background_default.png";
      } else {
      previewbackground.src = "/images/b/b5/Placeholderbackground.png";
      }
    });
}




Line 597: Line 4,001:
     modal.style.display = "none";
     modal.style.display = "none";
     modaldropdown.selectedIndex = 0;
     modaldropdown.selectedIndex = 0;
     decorpreviewbehind.src = " ";
     decorpreview.style.display = "none";
    basewolf.src = " ";
    decorpreviewbehind.style.display = "none";
    backbutton.style.display = "none";
     previewinput.style.display = "none";
     previewinput.style.display = "none";
     decorpreview.style.display = "none";
     decorpreview.style.display = "none";
     togglemenu.style.display = "none";
     togglemenu.style.display = "none";
     checkboxes.style.display = "none";
     checkboxes.style.display = "none";
    decorinformation.style.display = "block";
   } else if (event.target == modalclose) {
    previewbutton.style.display = "block";
    decorthumbnail.style.display = "block";
    obtentionheader.style.display = "block";
    obtention.style.display = "block";
    decorinformation.style.display = "block";
    previewbutton.style.display = "block";
 
   
   } else if (event.target === modalclose) {
     modal.style.display = "none";
     modal.style.display = "none";
     modaldropdown.selectedIndex = 0;
     modaldropdown.selectedIndex = 0;
     decorpreviewbehind.src = " ";
     decorpreview.style.display = "none";
    basewolf.src = " ";
    decorpreviewbehind.style.display = "none";
    backbutton.style.display = "none";
     previewinput.style.display = "none";
     previewinput.style.display = "none";
     decorpreview.style.display = "none";
     decorpreview.style.display = "none";
     togglemenu.style.display = "none";
     togglemenu.style.display = "none";
     checkboxes.style.display = "none";
     checkboxes.style.display = "none";
    decorinformation.style.display = "block";
    previewbutton.style.display = "block";
    decorthumbnail.style.display = "block";
    obtentionheader.style.display = "block";
    obtention.style.display = "block";
    decorinformation.style.display = "block";
    previewbutton.style.display = "block";
   }
   }
}
}
Line 654: Line 4,036:


var biomeClasses = selectedBiome + '_' + selectedSeason + '_' + selectedTime;
var biomeClasses = selectedBiome + '_' + selectedSeason + '_' + selectedTime;
biomeClasses = biomeClasses.toLowerCase()
biomeClasses = biomeClasses.toLowerCase().replace(/\s+/g, '');
var imageClasses = disaster + '_' + selectedBiome + '_' + selectedTime;
imageClasses = imageClasses.toLowerCase().replace(/\s+/g, '');
 
var biomeResultName = disaster + 'BiomeImage';
var biomeImageResult = document.getElementById(biomeResultName);
 
var biomeImageName = "/images/4/44/" + biomeClasses + ".png";
var weatherImageName = "/images/8/88/" + imageClasses + ".png";
 
biomeImageResult.style.background = 'url(' + biomeImageName + ')';
 
var weatherResultName = disaster + 'WeatherImage';
var weatherImageResult = document.getElementById(weatherResultName);
 
weatherImageResult.src = weatherImageName;
 
}
 
/* Stage and variant tables */
 
function updateStage(constant) { 
var stageDropdownName = constant + 'Stage';
var stageImage = constant + 'Image';
stageImage = document.getElementById(stageImage);
 
var stageDropdown = document.getElementById(stageDropdownName);
 
var selectedStage = stageDropdown.options[stageDropdown.selectedIndex].text;
selectedStage = selectedStage.toLowerCase().replace(/\s+/g, '').replace('[', '').replace(']', '');


var resultName = disaster + 'Image';
var stageImageName = constant + "_" + selectedStage;
var imageResult = document.getElementById(resultName);
var stageImageResult = "/images/5/55/" + stageImageName + ".png";


imageResult.textContent = biomeClasses;
stageImage.src = stageImageResult;


}
}

Latest revision as of 05:15, 22 November 2024

/* Any JavaScript here will be loaded for all users on every page load. */

/* Spoiler buttons */

var spoilersc = document.getElementsByClassName('spoilerButton');
    var j;

for (j = 0; j < spoilersc.length; j++) {
  spoilersc[j].addEventListener("click", function() {
    this.classList.toggle("active");
    var spoilercontent = this.nextElementSibling;
    if (spoilercontent.style.display === "block") {
      spoilercontent.style.display = "none";
    } else {
      spoilercontent.style.display = "block";
    }
  });
}

/* Dropdown menus */

function selectVariant(enemy, variant1, variant2, variant3, variant4, variant5, variant6, variant7, variant8, variant9, variant10, variant11, variant12) {  
var dropdownName = enemy + 'Variants';
var resultName = enemy + 'ChosenVariant';
var enemyVariant1 = enemy + variant1;
var enemyVariant2 = enemy + variant2;
var enemyVariant3 = enemy + variant3;
var enemyVariant4 = enemy + variant4;
var enemyVariant5 = enemy + variant5;
var enemyVariant6 = enemy + variant6;
var enemyVariant7 = enemy + variant7;
var enemyVariant8 = enemy + variant8;
var enemyVariant9 = enemy + variant9;
var enemyVariant10 = enemy + variant10;
var enemyVariant11 = enemy + variant11;
var enemyVariant12 = enemy + variant12;
var variant1div = document.getElementById(enemyVariant1);
var variant2div = document.getElementById(enemyVariant2);
var variant3div = document.getElementById(enemyVariant3);
var variant4div = document.getElementById(enemyVariant4);
var variant5div = document.getElementById(enemyVariant5);
var variant6div = document.getElementById(enemyVariant6);
var variant7div = document.getElementById(enemyVariant7);
var variant8div = document.getElementById(enemyVariant8);
var variant9div = document.getElementById(enemyVariant9);
var variant10div = document.getElementById(enemyVariant10);
var variant11div = document.getElementById(enemyVariant11);
var variant12div = document.getElementById(enemyVariant12);
var dropdown = document.getElementById(dropdownName); 

if(dropdown.options[dropdown.selectedIndex].text === variant1) {
     document.getElementById(resultName).value = enemyVariant1;
     variant1div.style.display = "block";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant2) {
     document.getElementById(resultName).value = enemyVariant2;
     variant1div.style.display = "none";
     variant2div.style.display = "block";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant3) {
     document.getElementById(resultName).value = enemyVariant3;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "block";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant4) {
     document.getElementById(resultName).value = enemyVariant4;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "block";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant5) {
     document.getElementById(resultName).value = enemyVariant4;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "block";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant6) {
     document.getElementById(resultName).value = enemyVariant4;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "block";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant7) {
     document.getElementById(resultName).value = enemyVariant4;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "block";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant8) {
     document.getElementById(resultName).value = enemyVariant4;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "block";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant9) {
     document.getElementById(resultName).value = enemyVariant4;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "block";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant10) {
     document.getElementById(resultName).value = enemyVariant4;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "block";
     variant11div.style.display = "none";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant11) {
     document.getElementById(resultName).value = enemyVariant4;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "block";
     variant12div.style.display = "none";
} else if(dropdown.options[dropdown.selectedIndex].text === variant12) {
     document.getElementById(resultName).value = enemyVariant4;
     variant1div.style.display = "none";
     variant2div.style.display = "none";
     variant3div.style.display = "none";
     variant4div.style.display = "none";
     variant5div.style.display = "none";
     variant6div.style.display = "none";
     variant7div.style.display = "none";
     variant8div.style.display = "none";
     variant9div.style.display = "none";
     variant10div.style.display = "none";
     variant11div.style.display = "none";
     variant12div.style.display = "block";
}
}

/* Adding link to discussion button 

$(function() {
    $('h1#firstHeading').each(function () {
        var $header = $(this).children('span').html();
        $pagetitle = $header.split(' ').join('_');
        $url = $(location).attr('href');
        $spliturl = $url.split(':').join(' ');

        var main = $spliturl.indexOf("Main");
        var mediawiki = $spliturl.indexOf("MediaWiki");
        var special = $spliturl.indexOf("Special");
        var edit = $spliturl.indexOf("edit");
        if(main !== -1){ 
           $(this).children('div').children('a').css("display", "none");
        } else if(mediawiki !== -1){ 
           $(this).children('div').children('a').css("display", "none");
        } else if(special !== -1){ 
           $(this).children('div').children('a').css("display", "none");
        } else if(edit !== -1){ 
           $(this).children('div').children('a').css("display", "none");
        } else{
        $talklink = "https://grousehouse.wiki/Talk:" + $pagetitle;
        $link = $(this).children('div').children('a');
        $link.attr("href", $talklink);
        }

    });
 });

*/

/* Section toggles */

function toggleSectionsOn() {
    var sections = document.getElementsByClassName("c-header"),
        len = sections !== null ? sections.length : 0,
        i = 0;
    for(i; i < len; i++) {
        var content = sections[i].nextElementSibling;
        content.style.display = "block";
        sections[i].classList.remove("hidden"); 
        sections[i].classList.add("active")
    }
}

function toggleSectionsOff() {
    var sections = document.getElementsByClassName("c-header"),
        len = sections !== null ? sections.length : 0,
        i = 0;
    for(i; i < len; i++) {
        var content = sections[i].nextElementSibling;
        content.style.display = "none";
        sections[i].classList.remove("active"); 
        sections[i].classList.add("hidden")
    }
}

/* Spoiler toggles */

function toggleSpoilersOn() {
    var sections = document.getElementsByClassName("spoilerButton"),
        len = sections !== null ? sections.length : 0,
        i = 0;
    for(i; i < len; i++) {
        var content = sections[i].nextElementSibling;
        content.style.display = "block";
        sections[i].classList.remove("hidden"); 
        sections[i].classList.add("active")
    }
}

function toggleSpoilersOff() {
    var sections = document.getElementsByClassName("spoilerButton"),
        len = sections !== null ? sections.length : 0,
        i = 0;
    for(i; i < len; i++) {
        var content = sections[i].nextElementSibling;
        content.style.display = "none";
        sections[i].classList.remove("active"); 
        sections[i].classList.add("hidden")
    }
}

/* Decor Previewer Garbage */

/* Establish Variables */
var modal = document.getElementById('decorModalV1');
var modalclose = document.getElementsByClassName('modalclose')[0];
var modaldropdown = document.getElementById('previewoptions');
var modalpreview = document.getElementById('decorpreviewimg');
var decorpreview = document.getElementById('decorpreview');
var previewinput = document.getElementById('previewinput');
var basewolf = document.getElementById('previewbasewolf');
var decortitle = document.getElementById('decorname');
var togglemenu = document.getElementById('checkboxesbutton');
var checkboxes = document.getElementById('checkboxes');
var backgroundtoggle = document.getElementById('backgroundtoggle');
var lightbasetoggle = document.getElementById('lightbasetoggle');
var darkbasetoggle = document.getElementById('darkbasetoggle');
var wolftoggle = document.getElementById('wolftoggle');
var previewbackground = document.getElementById('previewbackground');

/* Image Variables */
var backgroundimage = "/images/d/dd/Default_Daytime.png";
var backgroundnone = "/images/d/d8/Previewbackground_none.png";

var adultlight = "/images/4/47/Basewolf_adult.png";
var adultdark = "/images/e/e2/Basewolfdark_adult.png";
var motherlylight = "/images/d/d7/Basewolf_motherly.png";
var motherlydark = "/images/e/e9/Basewolfdark_motherly.png";
var relaxedlight = "/images/6/67/Basewolf_relaxed.png";
var relaxeddark = "/images/d/de/Basewolfdark_relaxed.png";
var sentinellight = "/images/e/e0/Basewolf_sentinel.png";
var sentineldark = "/images/c/c7/Basewolfdark_sentinel.png";
var adollight = "/images/7/78/Basewolf_adolescent.png";
var adoldark = "/images/4/48/Basewolfdark_adolescent.png";
var puplight = "/images/0/09/Basewolf_puppy.png";
var pupdark = "/images/2/29/Basewolfdark_pup.png";
var brachylight = "/images/3/31/Basewolf_brachy.png";
var brachydark = "/images/f/f1/Basewolfdark_brachycephaly.png";
var conjoinedlight = "/images/4/46/Basewolf_conjoinedtwins.png";
var conjoineddark = "/images/3/3a/Basewolfdark_conjoined.png";
var pupnewbornlight = "/images/7/7f/Basewolf_newbornpuppy.png";
var pupnewborndark = "/images/b/b6/Basewolfdark_pupnewborn.png";
var polyclight = "/images/b/b5/Basewolf_polycephaly.png";
var polycdark = "/images/e/e0/Basewolfdark_polycephaly.png";
var polymlight = "/images/6/6a/Basewolf_polymelia.png";
var polymdark = "/images/a/a4/Basewolfdark_polymelia.png";
var sirenlight = "/images/3/39/Basewolf_sirenomelia.png";
var sirendark = "/images/c/c6/Basewolfdark_siren.png";
var pupyounglight = "/images/0/0c/Basewolf_youngpuppy.png";
var pupyoungdark = "/images/2/25/Basewolfdark_pupyoung.png";

var nowolf = "/images/d/d8/Previewbackground_none.png";

/* Create Canvas */
var canvas = document.getElementById("decorpreview");
var ctx = canvas.getContext("2d");
var decorImage = new Image();
var wolfImage = new Image();
var backgroundImage = new Image();

function decorModalV1(decorname, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) {

/* Display all content when modal is opened */
    modal.style.display = "block";
    previewinput.style.display = "block";
    decorpreview.style.display = "block";
    togglemenu.style.display = "block";

    decortitle.innerHTML = decorname; /* Insert decor name */

/* Input default image */

backgroundImage.src = backgroundimage;
backgroundImage.onload = function() {
   canvas.width = backgroundImage.width;
   canvas.height = backgroundImage.height;
   ctx.drawImage(backgroundImage, 0, 0, 640, 500);
   wolfImage.src = "/images/4/47/Basewolf_adult.png";
   wolfImage.onload = function() {
      ctx.drawImage(wolfImage, 0, 0, 640, 500);
      decorImage.src = adulturl;
      decorImage.onload = function() {
         ctx.drawImage(decorImage, 0, 0, 640, 500);
         var img = canvas.toDataURL("image/png");
         document.write('<img src="' + img + '"/>');
   }
}
}

/* Check dropdown and checkboxes and remake canvas */

    modaldropdown.addEventListener("change", function() {
    if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = adultdark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = adultlight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = adulturl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
   } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = motherlydark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = motherlylight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = motherlyurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = relaxeddark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = relaxedlight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = relaxedurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = sentineldark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = sentinellight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = sentinelurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = adoldark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = adollight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = adolurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = pupdark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = puplight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = brachydark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = brachylight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupbrachyurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = conjoineddark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = conjoinedlight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupconjoinedurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = pupnewborndark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = pupnewbornlight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupnewbornurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = polycdark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = polyclight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = puppolycurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = polymdark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = polymlight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = puppolymurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = sirendark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = sirenlight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupsirenurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
      if (backgroundtoggle.checked) {
         backgroundImage.src = backgroundnone;
      } else {
         backgroundImage.src = backgroundimage;
      }
      if (darkbasetoggle.checked) {
         wolfImage.src = pupyoungdark;
      } else if (wolftoggle.checked) {
         wolfImage.src = nowolf;
      } else {
         wolfImage.src = pupyounglight;
      }
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
            wolfImage.onload = function() {
         ctx.drawImage(wolfImage, 0, 0, 640, 500);
            decorImage.src = pupyoungurl;
            decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            var img = canvas.toDataURL("image/png");
            document.write('<img src="' + img + '"/>');
            }
         }
      }
    } 
    });

   checkboxesbutton.addEventListener("click", function() {
       if (checkboxes.style.display === "none") {
          checkboxes.style.display = "block";
      } else {
          checkboxes.style.display = "none";
      }    
   });


   darkbasetoggle.addEventListener("onclick", function() {
      if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = adultdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = adultlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = adulturl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = motherlydark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = motherlylight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = motherlyurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = relaxeddark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = relaxedlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = relaxedurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = sentineldark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = sentinellight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = sentinelurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = adoldark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = adollight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = adolurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = pupdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = puplight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = brachydark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = brachylight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupbrachyurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = conjoineddark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = conjoinedlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupconjoinedurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = pupnewborndark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = pupnewbornlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupnewbornurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = polycdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = polyclight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = puppolycurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = polymdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = polymlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = puppolymurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = sirendark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = sirenlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupsirenurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = pupyoungdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = pupyounglight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupyoungurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      }
   });

   lightbasetoggle.addEventListener("onclick", function() {
      if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = adultdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = adultlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = adulturl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = motherlydark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = motherlylight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = motherlyurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = relaxeddark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = relaxedlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = relaxedurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = sentineldark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = sentinellight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = sentinelurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = adoldark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = adollight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = adolurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = pupdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = puplight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = brachydark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = brachylight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupbrachyurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = conjoineddark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = conjoinedlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupconjoinedurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = pupnewborndark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = pupnewbornlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupnewbornurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = polycdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = polyclight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = puppolycurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = polymdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = polymlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = puppolymurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = sirendark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = sirenlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupsirenurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = pupyoungdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = pupyounglight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupyoungurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      }
   });

   wolftoggle.addEventListener("onclick", function() {
      if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = adultdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = adultlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = adulturl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = motherlydark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = motherlylight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = motherlyurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = relaxeddark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = relaxedlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = relaxedurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = sentineldark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = sentinellight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = sentinelurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = adoldark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = adollight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = adolurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = pupdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = puplight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = brachydark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = brachylight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupbrachyurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = conjoineddark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = conjoinedlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupconjoinedurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = pupnewborndark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = pupnewbornlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupnewbornurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = polycdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = polyclight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = puppolycurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = polymdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = polymlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = puppolymurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = sirendark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = sirenlight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupsirenurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
         if (backgroundtoggle.checked) {
            backgroundImage.src = backgroundnone;
         } else {
            backgroundImage.src = backgroundimage;
         }
         if (darkbasetoggle.checked) {
            wolfImage.src = pupyoungdark;
         } else if (wolftoggle.checked) {
            wolfImage.src = nowolf;
         } else {
            wolfImage.src = pupyounglight;
         }
         backgroundImage.onload = function() {
            canvas.width = backgroundImage.width;
            canvas.height = backgroundImage.height;
            ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               wolfImage.onload = function() {
            ctx.drawImage(wolfImage, 0, 0, 640, 500);
               decorImage.src = pupyoungurl;
               decorImage.onload = function() {
               ctx.drawImage(decorImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
               }
            }
         }
      }
   });

    backgroundtoggle.addEventListener("click", function() {
         if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = adultdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = adultlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = adulturl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = motherlydark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = motherlylight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = motherlyurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = relaxeddark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = relaxedlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = relaxedurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = sentineldark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = sentinellight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = sentinelurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = adoldark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = adollight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = adolurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = pupdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = puplight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = brachydark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = brachylight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupbrachyurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = conjoineddark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = conjoinedlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupconjoinedurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = pupnewborndark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = pupnewbornlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupnewbornurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = polycdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = polyclight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = puppolycurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = polymdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = polymlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = puppolymurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = sirendark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = sirenlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupsirenurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = pupyoungdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = pupyounglight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
                  decorImage.src = pupyoungurl;
                  decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  var img = canvas.toDataURL("image/png");
                  document.write('<img src="' + img + '"/>');
                  }
               }
            }
         }
      });
   };

    function decorModalBehindV1(decorname, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) {

      /* Display all content when modal is opened */
          modal.style.display = "block";
          previewinput.style.display = "block";
          decorpreview.style.display = "block";
          togglemenu.style.display = "block";
      
          decortitle.innerHTML = decorname; /* Insert decor name */
      
      /* Input default image */
      
      backgroundImage.src = backgroundimage;
      backgroundImage.onload = function() {
         canvas.width = backgroundImage.width;
         canvas.height = backgroundImage.height;
         ctx.drawImage(backgroundImage, 0, 0, 640, 500);
         decorImage.src = adulturl;
         decorImage.onload = function() {
            ctx.drawImage(decorImage, 0, 0, 640, 500);
            wolfImage.src = "/images/4/47/Basewolf_adult.png";
            wolfImage.onload = function() {
               ctx.drawImage(wolfImage, 0, 0, 640, 500);
               var img = canvas.toDataURL("image/png");
               document.write('<img src="' + img + '"/>');
            }
         }
      }
      
      /* Check dropdown and checkboxes and remake canvas */
      
          modaldropdown.addEventListener("change", function() {
          if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = adultdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = adultlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = adulturl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
         } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = motherlydark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = motherlylight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = motherlyurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = relaxeddark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = relaxedlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = relaxedurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = sentineldark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = sentinellight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = sentinelurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = adoldark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = adollight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = adolurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = pupdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = puplight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = pupurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = brachydark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = brachylight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = pupbrachyurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = conjoineddark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = conjoinedlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = pupconjoinedurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = pupnewborndark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = pupnewbornlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = pupnewbornurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = polycdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = polyclight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = puppolycurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = polymdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = polymlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = puppolymurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = sirendark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = sirenlight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = pupsirenurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
            if (backgroundtoggle.checked) {
               backgroundImage.src = backgroundnone;
            } else {
               backgroundImage.src = backgroundimage;
            }
            if (darkbasetoggle.checked) {
               wolfImage.src = pupyoungdark;
            } else if (wolftoggle.checked) {
               wolfImage.src = nowolf;
            } else {
               wolfImage.src = pupyounglight;
            }
            backgroundImage.onload = function() {
               canvas.width = backgroundImage.width;
               canvas.height = backgroundImage.height;
               ctx.drawImage(backgroundImage, 0, 0, 640, 500);
               decorImage.src = pupyoungurl;
               decorImage.onload = function() {
                  ctx.drawImage(decorImage, 0, 0, 640, 500);
                  wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                     var img = canvas.toDataURL("image/png");
                     document.write('<img src="' + img + '"/>');
                  }
               }
            }
          } 
          });
      
         checkboxesbutton.addEventListener("click", function() {
             if (checkboxes.style.display === "none") {
                checkboxes.style.display = "block";
            } else {
                checkboxes.style.display = "none";
            }    
         });
      
      
         darkbasetoggle.addEventListener("onclick", function() {
            if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = adultdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = adultlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adulturl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = motherlydark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = motherlylight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = motherlyurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = relaxeddark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = relaxedlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = relaxedurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = sentineldark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = sentinellight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = sentinelurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = adoldark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = adollight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adolurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = pupdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = puplight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = brachydark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = brachylight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupbrachyurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = conjoineddark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = conjoinedlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupconjoinedurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = pupnewborndark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = pupnewbornlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupnewbornurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = polycdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = polyclight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolycurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = polymdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = polymlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolymurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = sirendark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = sirenlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupsirenurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = pupyoungdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = pupyounglight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupyoungurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            }
         });
      
         lightbasetoggle.addEventListener("onclick", function() {
            if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = adultdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = adultlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adulturl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = motherlydark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = motherlylight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = motherlyurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = relaxeddark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = relaxedlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = relaxedurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = sentineldark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = sentinellight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = sentinelurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = adoldark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = adollight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adolurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = pupdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = puplight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = brachydark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = brachylight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupbrachyurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = conjoineddark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = conjoinedlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupconjoinedurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = pupnewborndark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = pupnewbornlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupnewbornurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = polycdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = polyclight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolycurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = polymdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = polymlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolymurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = sirendark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = sirenlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupsirenurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = pupyoungdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = pupyounglight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupyoungurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            }
         });
      
         wolftoggle.addEventListener("onclick", function() {
            if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = adultdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = adultlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adulturl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = motherlydark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = motherlylight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = motherlyurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = relaxeddark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = relaxedlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = relaxedurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = sentineldark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = sentinellight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = sentinelurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = adoldark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = adollight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = adolurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = pupdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = puplight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = brachydark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = brachylight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupbrachyurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = conjoineddark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = conjoinedlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupconjoinedurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = pupnewborndark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = pupnewbornlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupnewbornurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = polycdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = polyclight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolycurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = polymdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = polymlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = puppolymurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = sirendark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = sirenlight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupsirenurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
               if (backgroundtoggle.checked) {
                  backgroundImage.src = backgroundnone;
               } else {
                  backgroundImage.src = backgroundimage;
               }
               if (darkbasetoggle.checked) {
                  wolfImage.src = pupyoungdark;
               } else if (wolftoggle.checked) {
                  wolfImage.src = nowolf;
               } else {
                  wolfImage.src = pupyounglight;
               }
               backgroundImage.onload = function() {
                  canvas.width = backgroundImage.width;
                  canvas.height = backgroundImage.height;
                  ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                  decorImage.src = pupyoungurl;
                  decorImage.onload = function() {
                     ctx.drawImage(decorImage, 0, 0, 640, 500);
                     wolfImage.onload = function() {
                        ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                     }
                  }
               }
            }
         });
      
          backgroundtoggle.addEventListener("click", function() {
               if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = adultdark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = adultlight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = adulturl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = motherlydark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = motherlylight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = motherlyurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = relaxeddark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = relaxedlight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = relaxedurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = sentineldark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = sentinellight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = sentinelurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = adoldark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = adollight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = adolurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = pupdark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = puplight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = brachydark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = brachylight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupbrachyurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = conjoineddark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = conjoinedlight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupconjoinedurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = pupnewborndark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = pupnewbornlight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupnewbornurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = polycdark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = polyclight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = puppolycurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = polymdark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = polymlight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = puppolymurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = sirendark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = sirenlight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupsirenurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") {
                  if (backgroundtoggle.checked) {
                     backgroundImage.src = backgroundnone;
                  } else {
                     backgroundImage.src = backgroundimage;
                  }
                  if (darkbasetoggle.checked) {
                     wolfImage.src = pupyoungdark;
                  } else if (wolftoggle.checked) {
                     wolfImage.src = nowolf;
                  } else {
                     wolfImage.src = pupyounglight;
                  }
                  backgroundImage.onload = function() {
                     canvas.width = backgroundImage.width;
                     canvas.height = backgroundImage.height;
                     ctx.drawImage(backgroundImage, 0, 0, 640, 500);
                        wolfImage.onload = function() {
                     ctx.drawImage(wolfImage, 0, 0, 640, 500);
                        decorImage.src = pupyoungurl;
                        decorImage.onload = function() {
                        ctx.drawImage(decorImage, 0, 0, 640, 500);
                        var img = canvas.toDataURL("image/png");
                        document.write('<img src="' + img + '"/>');
                        }
                     }
                  }
               }
            });
         };



window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    modaldropdown.selectedIndex = 0;
    decorpreview.style.display = "none";
    previewinput.style.display = "none";
    decorpreview.style.display = "none";
    togglemenu.style.display = "none";
    checkboxes.style.display = "none";
  } else if (event.target == modalclose) {
    modal.style.display = "none";
    modaldropdown.selectedIndex = 0;
    decorpreview.style.display = "none";
    previewinput.style.display = "none";
    decorpreview.style.display = "none";
    togglemenu.style.display = "none";
    checkboxes.style.display = "none";
  }
}

/* Disaster tables */

function generateDisaster(disaster) {  
var biomeDropdownName = disaster + 'Biomes';
var seasonDropdownName = disaster + 'Seasons';
var timeDropdownName = disaster + 'Times';
var biomeResultName = disaster + 'ChosenBiome';
var seasonResultName = disaster + 'ChosenSeason';
var timeResultName = disaster + 'ChosenTime';

var biomeDropdown = document.getElementById(biomeDropdownName);
var seasonDropdown = document.getElementById(seasonDropdownName);
var timeDropdown = document.getElementById(timeDropdownName);

var selectedBiome = biomeDropdown.options[biomeDropdown.selectedIndex].text;
var selectedSeason = seasonDropdown.options[seasonDropdown.selectedIndex].text;
var selectedTime = timeDropdown.options[timeDropdown.selectedIndex].text;

var biomeClasses = selectedBiome + '_' + selectedSeason + '_' + selectedTime;
biomeClasses = biomeClasses.toLowerCase().replace(/\s+/g, '');
var imageClasses = disaster + '_' + selectedBiome + '_' + selectedTime;
imageClasses = imageClasses.toLowerCase().replace(/\s+/g, '');

var biomeResultName = disaster + 'BiomeImage';
var biomeImageResult = document.getElementById(biomeResultName);

var biomeImageName = "/images/4/44/" + biomeClasses + ".png";
var weatherImageName = "/images/8/88/" + imageClasses + ".png";

biomeImageResult.style.background = 'url(' + biomeImageName + ')';

var weatherResultName = disaster + 'WeatherImage';
var weatherImageResult = document.getElementById(weatherResultName);

weatherImageResult.src = weatherImageName;

}

/* Stage and variant tables */

function updateStage(constant) {  
var stageDropdownName = constant + 'Stage';
var stageImage = constant + 'Image';
stageImage = document.getElementById(stageImage);

var stageDropdown = document.getElementById(stageDropdownName);

var selectedStage = stageDropdown.options[stageDropdown.selectedIndex].text;
selectedStage = selectedStage.toLowerCase().replace(/\s+/g, '').replace('[', '').replace(']', '');

var stageImageName = constant + "_" + selectedStage;
var stageImageResult = "/images/5/55/" + stageImageName + ".png";

stageImage.src = stageImageResult;

}