const sample = document.querySelector("#sample");

// I commented the following line out by putting '//' at the start of the line.
//console.log(document);

console.log('color = ', sample.style.color);
// set default color
if (!sample.style.color) {
  var color;
  // from https://stackoverflow.com/questions/46336002/how-to-get-computed-background-color-style-inherited-from-parent-element
  var div = document.createElement("div");
  document.head.appendChild(div);
  var color = window.getComputedStyle(div).color;
  document.head.removeChild(div);
  sample.style.color = color;
}

// red, green, blue, yellow, black, white, or #ccc or #5ef21d
function changeColor(color) {
  sample.style.color = color;
}

function changeWeight() {
  let weight;
  if (sample.style.fontWeight == 'bold') {
    weight = 'normal';
  } else {
    weight = 'bold';
  }
  sample.style.fontWeight = weight;
}

// normal or small-caps
function changeVariant() {
  let variant;
  if (sample.style.fontVariant == 'small-caps') {
    variant = 'normal';
  } else {
    variant = 'small-caps';
  }
  sample.style.fontVariant = variant;
}

// normal, italic, or oblique
function changeStyle() {
  let style;
  if (sample.style.fontStyle == 'italic') {
    style = 'normal';
  } else {
    style = 'italic';
  }
  console.log('style = ', style);
  sample.style.fontStyle = style;
}

// set text shadow
function changeToShadow() {
  var color = sample.style.color;
  var shadow;
  console.log('found color ', sample);
  // if we're already in shadow mode, reset color
  var str = '0px 0px 5px';
  // is shadow mode already on? If so disable it.
  if (sample.getAttribute('text-shadow') && sample.getAttribute('text-shadow').includes(str)) {
    shadow = sample.getAttribute('text-shadow');
    console.log('shadow', shadow);
    // replace the contents of str with nuthin' to get the color
    color = shadow.replace(str,'');
    console.log('got color ', color);
    // return the color to its previous state
    sample.style.color = color;
    // remove shadow
    sample.removeAttribute('text-shadow');
  // otherwise enable shadow mode...
  } else {
    sample.style.textShadow = str + ' ' + color;
    console.log('set textShadow to ', sample.style.textShadow);
    sample.style.color = 'white';
  }
}


// turn CSS on and off and change status text
function changeCSS() {
  var indicator = document.getElementById('status');
  var linkNode = null;
  // do we already have the link in the DOM?
  if (linkNode = document.getElementsByTagName('link')[0]) {
    linkNode.parentNode.removeChild(linkNode);
    // update the indicator
    indicator.textContent = 'on';
  } else {
    var head = document.getElementsByTagName('HEAD')[0];
    // Create new link Element
    var link = document.createElement('link');
    // set the attributes for link element
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'css/style.css';
    // Append link element to HTML head
    head.appendChild(link);
    // update the indicator
    indicator.textContent = 'off';
  }
}