// get the first letter of the text 
var unicodeVal = document.getElementById('display').getElementsByTagName('p')[0].innerText.substring(0,1);
var fontFile = "";
var currentStyle = "style0"
var allGlyphs;
var svgdisplay = document.querySelector("svg");
var svgimg = document.querySelector("img");
var svgimgHeight = 300;
var xOffset = 0;
var yOffset = 150;
var dValue = "";
var alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

// loads SVG font file for selected font
function chooseFont() {
  // font file is selected in drop-down menu
  fontFile = document.getElementById("fonts").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // get all Glyph elements from XML
      var xmlDoc = this.responseXML;
      allGlyphs = xmlDoc.getElementsByTagName("glyph");
      showLetter();
    }
  };
  xhttp.open("GET", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/"+fontFile+".svg", true);
  xhttp.send();
}

function showLetter(){
  for(var i=0;i<allGlyphs.length;i++){
    if(allGlyphs[i].getAttribute("unicode")==unicodeVal){
      // get "d" value for currently selected letter 
      dValue = allGlyphs[i].getAttribute("d")
    }
  }
  svgdisplay.innerHTML = eval(currentStyle).filter + '<path id="letterPath" unicode="'+ unicodeVal +'" d="'+ dValue +'" />';
  var displayPath = document.getElementById("letterPath");
  var displayBox = displayPath.getBBox();
  var scaleFactor = 1000/displayBox.height;
  svgdisplay.setAttribute("viewBox", "0 0 "+((scaleFactor*displayBox.width)+200)+" "+1200);
  displayPath.setAttribute("transform","scale("+scaleFactor+", "+(0-scaleFactor)+") translate("+ (100-scaleFactor*displayBox.x) +", "+ (0-(scaleFactor*displayBox.y+displayBox.height+100)) +")");

  svgStr = '<svg width="'+ ((scaleFactor*displayBox.width) + 200) +'px" height="'+ 1200 +'px" version="1.1" xmlns="http://www.w3.org/2000/svg"><path transform="scale('+scaleFactor+', '+(0-scaleFactor)+') translate('+ (100-scaleFactor*displayBox.x) +', '+ (0-(scaleFactor*displayBox.y+displayBox.height+100)) +')" unicode="'+ unicodeVal +'" d="'+ dValue +'" /></svg>';

  var svgStrEncode = encodeURI(svgStr);
  var srcStr = 'data:image/svg+xml,'+svgStrEncode;
  console.log(decodeURI(srcStr)); 
  svgimg.src = srcStr;
  svgimg.style.webkitShapeOutside = 'url("'+srcStr+'")';
  svgimg.style.shapeOutside = 'url("'+srcStr+'")';
  sizeLetter();
}

function sizeLetter(){
  svgimg.style.height = svgimgHeight+"px";
}

function chooseStyle(newStyleBtn) {
  currentStyle = newStyleBtn.value;
  showLetter();
}

var inputLetter = document.getElementById("letterNum");
inputLetter.addEventListener("input", onInputLetterFunc, false);
inputLetter.value = 6;

function onInputLetterFunc(){
  unicodeVal = alphabet[inputLetter.value-1];
  showLetter();
}

var inputSize = document.getElementById("letterSize");
inputSize.addEventListener("input", onInputSizeFunc, false);
inputSize.value = svgimgHeight;

function onInputSizeFunc(){
  svgimgHeight = inputSize.value;
  sizeLetter();
}

var inputX = document.getElementById("xPos");
inputX.addEventListener("input", onInputXFunc, false);
inputX.value = xOffset;

function onInputXFunc(){
  svgimg.style.marginLeft = inputX.value+"px";
}

var inputY = document.getElementById("yPos");
inputY.addEventListener("input", onInputYFunc, false);
inputY.value = yOffset;

function onInputYFunc(){
  document.getElementsByTagName('P')[0].style.marginTop = inputY.value+"px";
}

var style0 = { filter:`
    <defs>     
      <filter id="filter">
          <feFlood flood-color="#2E282A" result="COLOR-default"></feFlood>
          <feComposite in="COLOR-default" in2="SourceGraphic" operator="in" result="extrusion0"</feComposite>
      </filter>
    </defs>
`};



var style2 = { filter:`<defs>
  <filter id="filter" x="-20%" y="-20%" width="140%" height="140%">
    <feFlood flood-color="#F77F00" result="COLOR-orange"></feFlood>
    <feComposite in="COLOR-orange" in2="SourceGraphic" operator="in" result="ColouredOriginal"></feComposite>
    <feOffset in="SourceAlpha" dx="10" dy="10"></feOffset>
    <feGaussianBlur stdDeviation="10" result="DROP"></feGaussianBlur>
    <feFlood flood-color="#bbb" result="COLOR"></feFlood>
    <feComposite
      in="COLOR" in2="DROP"
      operator="in" result="SHADOW">
    </feComposite>
    <feMerge>
      <feMergeNode in="SHADOW" />
      <feMergeNode in="ColouredOriginal" />
    </feMerge>
  </filter>
</defs>
`};

var style6 = { filter:`
    <defs>     
      <filter id="filter">
          <feFlood flood-color="#E40066" result="COLOR-pink"></feFlood>
          <feFlood flood-color="#03CEA4" result="COLOR-shadow"></feFlood>
          <feFlood flood-color="#345995" result="COLOR-dark"></feFlood>
          <feImage xlink:href="data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221000px%22%20height%3D%221000px%22%20%20%3E%0A%09%3Cdefs%3E%0A%09%09%3Cpattern%20id%3D%22pattern%22%20patternUnits%3D%22userSpaceOnUse%22%20width%3D%225px%22%20height%3D%225px%22%20viewBox%3D%220%200%205%205%22%20%3E%0A%09%09%09%3Cpolygon%20points%3D%225%2C0%204.012%2C0%205%2C0.989%20%09%22%2F%3E%0A%09%09%09%3Cpolygon%20points%3D%225%2C5%200%2C0%200%2C0.989%204.01%2C5%20%09%22%2F%3E%0A%09%09%3C%2Fpattern%3E%0A%09%3C%2Fdefs%3E%0A%09%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23pattern)%22%20%2F%3E%0A%3C%2Fsvg%3E" x="0" y="0" width="1000" height="1000" result="IMAGE-stripes"></feImage>
          <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="dilatedLetter"></feMorphology>
         <feConvolveMatrix order="8,8" divisor="1" kernelMatrix="1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1" in="dilatedLetter" result="extrudedLetter"></feConvolveMatrix>

          <feOffset dx="4" dy="4" in="extrudedLetter" result="offetExtrusion1"></feOffset>
          <feOffset dx="8" dy="8" in="extrudedLetter" result="offetExtrusion2"></feOffset>
          <feOffset dx="10" dy="10" in="extrudedLetter" result="offetExtrusion3"></feOffset>
          <feOffset dx="14" dy="14" in="extrudedLetter" result="offetExtrusion4"></feOffset>

          <feMerge result="superExtrusion">
            <feMergeNode in="offetExtrusion1"></feMergeNode>
            <feMergeNode in="offetExtrusion2"></feMergeNode>
            <feMergeNode in="offetExtrusion3"></feMergeNode>
            <feMergeNode in="offetExtrusion4"></feMergeNode>
          </feMerge>
          <feComposite in="COLOR-pink" in2="SourceGraphic" operator="in" result="ColouredOriginal"></feComposite>
          <feComposite in="COLOR-shadow" in2="superExtrusion" operator="in" result="superExtrusion"></feComposite>
          <feComposite in="COLOR-dark" in2="dilatedLetter" operator="in" result="dilatedLetter"></feComposite>
          <feComposite in="COLOR-dark" in2="IMAGE-stripes" operator="in" result="IMAGE-stripes"></feComposite>
          <feComposite operator="in" in="IMAGE-stripes" in2="superExtrusion" result="topStripes"></feComposite>

          <feMerge result="fullMerge">
            <feMergeNode in="superExtrusion"></feMergeNode>
            <feMergeNode in="topStripes"></feMergeNode>
            <feMergeNode in="dilatedLetter"></feMergeNode>
            <feMergeNode in="ColouredOriginal"></feMergeNode>
          </feMerge>
          <feOffset dx="-14" dy="-14" in="fullMerge" result="fullMerge"></feOffset>


      </filter>
    </defs>
`};
var style7 = { filter:`
    <defs>     
      <filter id="filter">
          <feFlood flood-color="#FA735A" result="COLOR-salmon"></feFlood>
          <feFlood flood-color="#B1B1B2" result="COLOR-grey"></feFlood>
          <feFlood flood-color="#BFD1DD" result="COLOR-blue"></feFlood>
         <feConvolveMatrix order="8,8" divisor="1" kernelMatrix="1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1" in="SourceAlpha" result="extrudedLetter"></feConvolveMatrix>

          <feOffset dx="4" dy="4" in="extrudedLetter" result="offetExtrusion1"></feOffset>
          <feOffset dx="8" dy="8" in="extrudedLetter" result="offetExtrusion2"></feOffset>
          <feOffset dx="10" dy="10" in="extrudedLetter" result="offetExtrusion3"></feOffset>
          <feOffset dx="14" dy="14" in="extrudedLetter" result="offetExtrusion4"></feOffset>

          <feMerge result="extrusion1">
            <feMergeNode in="offetExtrusion1"></feMergeNode>
          </feMerge>
          <feMerge result="extrusion2">
            <feMergeNode in="offetExtrusion2"></feMergeNode>
            <feMergeNode in="offetExtrusion3"></feMergeNode>
            <feMergeNode in="offetExtrusion4"></feMergeNode>
          </feMerge>
          <feComposite in="COLOR-salmon" in2="SourceGraphic" operator="in" result="extrusion0"></feComposite>
          <feComposite in="COLOR-blue" in2="extrusion1" operator="in" result="extrusion1"></feComposite>
          <feComposite in="COLOR-grey" in2="extrusion2" operator="in" result="extrusion2"></feComposite>
          <feMerge result="fullMerge">
            <feMergeNode in="extrusion2"></feMergeNode>
            <feMergeNode in="extrusion1"></feMergeNode>
            <feMergeNode in="extrusion0"></feMergeNode>
          </feMerge>
          <feOffset dx="-14" dy="-14" in="fullMerge" result="fullMerge"></feOffset>
      </filter>
    </defs>
`};

// display the chosen font, which includes displaying the drop cap first letter
chooseFont();