.elementor-925 .elementor-element.elementor-element-93cd8ef{--display:flex;--flex-direction:column-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-widget-text-path{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-925 .elementor-element.elementor-element-0271701{--alignment:right;--direction:ltr;width:initial;max-width:initial;--path-stroke:#E8178A;--path-fill:transparent;--width:100vw;--rotate:360deg;font-family:"Buttersky Complete", Sans-serif;font-size:29px;font-weight:400;--word-spacing:0px;--text-color:var( --e-global-color-d832298 );--transition:0.3s;--stroke-width:1px;--stroke-transition:0.3s;}.elementor-925 .elementor-element.elementor-element-0271701 > .elementor-widget-container{margin:65px 50px 0px 0px;}.elementor-925 .elementor-element.elementor-element-0271701.elementor-element{--align-self:flex-end;--order:-99999 /* order start hack */;}@media(max-width:1366px){.elementor-925 .elementor-element.elementor-element-0271701 > .elementor-widget-container{margin:45px 30px 0px 0px;}}@media(max-width:1024px){.elementor-925 .elementor-element.elementor-element-0271701{--width:50vw;}}@media(max-width:767px){.elementor-925 .elementor-element.elementor-element-93cd8ef{--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-925 .elementor-element.elementor-element-0271701 > .elementor-widget-container{margin:0px 5px 0px 0px;}.elementor-925 .elementor-element.elementor-element-0271701{--width:100vw;}}/* Start custom CSS for container, class: .elementor-element-93cd8ef */@import url("https://codepen.io/MacEvelly/pen/iJGCw.css");

.holder {
  width: 700px;
}

.held {
  position: relative;
  overflow: hidden;
}

.button {
  width: 150px;
  padding: 10px;
}

#ActivityDIV .swatchHolder {
  position: absolute;
  bottom: 0px;
  margin: auto;
  left: 0px;
  right: 0px;
  list-style-type: none;
  text-align: center;
  display: inline-block;
  padding: 15px;
  width: 260px;
  border-radius: 20px 20px 0px 0px;
  color: black;
}

#ActivityDIV .swatchHolder .colorHolder {
  width: 100%;
  line-height: 100%;
  content: 'Chosen Color';
  padding: 10px 0px;
  margin: 0px auto 15px auto;
  cursor: pointer;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

#ActivityDIV .swatchHolder li:not(.colorHolder) {
  height: 25px;
  width: 25px;
  margin: 2px;
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

#ActivityDIV svg {
  width: 100%;
  display: inline-block;
}

#ActivityDIV svg path {
  cursor: pointer;
}

(function ($) {

  console.clear()
  console.log('svgColor')

  var mainHolder, colorHolder
  var btnRandom, btnClear, btnDownloadSVG, btnDownloadPNG, btnZoomIn, btnZoomOut
  var svgObject, svgOutline, svgColor
  var swatchUp, swatchDown
  var fillSpeed = 0.15
  var chosenColor = '#FFFFFF'
  var colors = ['#FFFFFF', '#8E53A1', '#6ABD46', '#71CCDC', '#F7ED45', '#F7DAAF', '#EC2527', '#F16824', '#CECCCC', '#5A499E', '#06753D', '#024259', '#FDD209', '#7D4829', '#931B1E', '#B44426', '#979797', '#C296C5', '#54B948', '#3C75BB', '#F7ED45', '#E89D5E', '#F26F68', '#F37123', '#676868', '#9060A8', '#169E49', '#3CBEB7', '#FFCD37', '#E5B07D', '#EF3C46', '#FDBE17', '#4E4D4E', '#6B449B', '#BACD3F', '#1890CA', '#FCD55A', '#D8C077', '#A62E32', '#F16A2D', '#343433', '#583E98', '#BA539F', '#9D2482', '#DD64A5', '#DB778D', '#EC4394', '#E0398C', '#68AF46', '#4455A4', '#FBEE34', '#AD732A', '#D91E36', '#F99B2A']
  var closeOffset
  var zoomLevel = 1;

  function swatchClick() {
    chosenColor = $(this).data('color')
    console.log(chosenColor)
    TweenMax.to(colorHolder, fillSpeed, { backgroundColor: chosenColor })
  }

  function swatchMove(e) {
    var moveTo = (e.type == 'mouseenter') ? swatchUp : swatchDown;
    TweenMax.to('.swatchHolder', 0.5, moveTo);
  }

  function colorMe() {
    TweenMax.to(this, fillSpeed, { fill: chosenColor });
  }

  function colorRollover(e) {
    var rollover = (e.type == 'mouseenter') ? { scale: 1.2 } : { scale: 1 };
    TweenMax.to($(this), 0.05, rollover);
  }

  function download() {
    var svgInfo = document.querySelector('svg').outerHTML
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(svgInfo, "text/xml");
    var dl = document.createElement("a");
    document.body.appendChild(dl); // This line makes it work in Firefox.
    dl.setAttribute("href", "data:image/svg+xml;base64," + xmlDoc);
    dl.setAttribute("download", "test.svg");
    dl.click();
  }

  function svgRandom() {
    $(svgColor).each(function () {
      var randomNum = Math.floor((Math.random() * colors.length) + 1);
      TweenMax.to(this, fillSpeed, { fill: colors[randomNum] });
    })
  }

  function svgClear() {
    $(svgColor).each(function () {
      TweenMax.to(this, fillSpeed, { fill: "#FFF" });
    })
  }

  function svgDownloadSVG() {
    var svgInfo = $(svgObject).clone();
    console.clear()
    console.log(svgInfo)
    $(this).attr({
      href: "data:image/svg+xml;base64," + svgInfo.toString(),
      download: 'coloringBook.svg',
      target: "_blank"
    });
  }

  function svgDownloadPNG() {
    // Future expansion:
    // Look at https://bl.ocks.org/biovisualize/8187844
  }

  function zoomIn() {
    var img = $('#jpgImage');
    var currentWidth = img.width();
    var currentHeight = img.height();
    var newWidth = currentWidth * 1.2;
    var newHeight = currentHeight * 1.2;
    img.width(newWidth);
    img.height(newHeight);
  }

  function zoomOut() {
    var img = $('#jpgImage');
    var currentWidth = img.width();
    var currentHeight = img.height();
    var newWidth = currentWidth * 0.8;
    var newHeight = currentHeight * 0.8;
    img.width(newWidth);
    img.height(newHeight);
  }

  $.fn.makeSwatches = function () {
    var swatchHolder = $('<ol/>', { 'class': 'swatchHolder' }).appendTo(this)
    colorHolder = $('<li/>', { 'class': 'colorHolder', 'text': 'Current Color' }).css('background-color', chosenColor).appendTo(swatchHolder)

    $.each(colors, function () {
      var swatch = $('<li/>').appendTo(swatchHolder)
      $(swatch).css('background-color', this)
      $(swatch).data('color', this)
      $(swatch).on('click', swatchClick)
      $(swatch).on('mouseenter mouseleave', colorRollover)
    })

    var swatchPos = $('.colorHolder').position()
    var swatchHeight = $('.colorHolder').outerHeight(true) + swatchPos.top
    closeOffset = swatchHeight - $('.swatchHolder').outerHeight()

    $('.swatchHolder').on('mouseenter mouseleave', swatchMove)
    $('.swatchHolder').css('bottom', closeOffset)
    swatchUp = { css: { bottom: 0 } }
    swatchDown = { css: { bottom: closeOffset } }
  }
  $.fn.makeSVGcolor = function (svgURL) {
    mainHolder = this;
    
    mainHolder[0].zoomIn = zoomIn;
    mainHolder[0].zoomOut = zoomOut;
    
    $(this).load(svgURL, function () {
      svgObject = $('svg', this)
      svgColor = $('g#Color', svgObject).children()
      svgOutline = $('g:nth-child(1)', svgObject).children()
      $(svgColor).on('click', colorMe)
      $(mainHolder).makeSwatches()
      $('.swatchHolder').addClass('gray')
    });
  }

  $.fn.btnRandom = function () {
    btnRandom = this
    $(btnRandom).on('click', svgRandom)
  }
  $.fn.btnClear = function () {
    btnClear = this
    $(btnClear).on('click', svgClear)
  }
  $.fn.btnDownload = function (type) {
    if (type == 'PNG') {
      btnDownloadPNG = this
      $(this).on('mouseenter', svgDownloadPNG)
    } else {
      btnDownloadSVG = this
      $(this).on('mouseenter', svgDownloadSVG)
    }
  }

  $.fn.btnDownload2 = function () {
    btnClear = this
    $(btnClear).on('click', download)
  }

  $.fn.btnZoomIn = function () {
    this.on('click', zoomIn);
    return this;
  };

  $.fn.btnZoomOut = function () {
    this.on('click', zoomOut);
    return this;
  };


}(jQuery));

$('#ActivityDIV').makeSVGcolor('https://s3-us-west-2.amazonaws.com/s.cdpn.io/40041/cheshire.svg')
//$('#ActivityDIV').makeSVGcolor('https://assets.codepen.io/40041/crest.svg')
$('#btnRandom').btnRandom()
$('#btnClear').btnClear()
$('#btnDownloadSVG').btnDownload()
$('#btnDownloadSVG2').btnDownload2()
$('#btnZoomIn').btnZoomIn();
$('#btnZoomOut').btnZoomOut();/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Buttersky Complete';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://littlescarlett.com/wp-content/uploads/2023/10/ButterskyComplete-Regular.ttf') format('truetype');
}
/* End Custom Fonts CSS */