//  HowToStyle
//  James Brink         2/15/2020

let div1;
let div2;
let div = [];
let diva1 = [];
let diva2 = [];
let divaCommit = [];
let divb1 = [];
let divbCommit = [];
let divc = [];
let dive1 = [];
let dive2 = [];
let div1Title;    // the ititialize division title
let div1d;      // the initialize division
let div1Wait;       // the slider
let div1Initialize;   // the button

// Used while initializing Div 1
let wait = 0;
let deltaWait = 0;

// Initialize division 1
// Issues a series of commands for Div1 which are shown in the appropriate
// blanks.  They are delayed by the value of slider so the user can see what
// is happening
function initialize1() {
  // get the value of the slider
  deltaWait = 1000 * div1dSlider.value();
  // revise and disable the Initialize button
  div1Initialize.html("Please wait");
  div1Initialize.style("color: red");
  // issue the commands
  executeWait(div[0], "background-color", "lightBlue", "div1", divc[0]);
  executeWait(div[0], "height", "450px", "div1", divc[0]);
  executeWait(div[0], "float", "left", "div1",divc[0]); 
  executeWait(div[0], "color:brown", "", "div1",divc[0]);
  executeWait(div[0], "font-style: italic; font-size:14pt", "", "div1", divc[0]);
  executeWait(div[0], "border-style: solid; border-color :blue", "", "div1" ,divc[0]);
  // revise the Initialize button again to indicate the process is finished
  setTimeout(function() {div1Initialize.html("Finished");
                div1Initialize.style("color: green")}, wait);
  setTimeout(function() {div1dTitle.hide(); div1d.hide()}, wait+deltaWait);
}
// }  // initialize1

// Execute after a wait during initialization.   wait is increment
// Note:  All the initialization are set up immediately but this function
// delays their execution.
function executeWait(div, param1, param2, divSt, displayIn) {
  setTimeout(function() {
                  showStep(div, param1, param2, divSt, displayIn);
                  execute(div, param1, param2, divSt, displayIn)
              }, wait);
  wait += deltaWait;
}  // executeWait

// Displays initialization values in the appropriate command as if the
// user typed them.
function showStep(div, param1, param2, divSt, displayIn) {
      if (param2 == "") {
        diva1[0].value("");
        diva2[0].value("");
        divb1[0].value('"' +param1 + '"' );
       } else {
        diva1[0].value('"'  + param1 + '"' );
        diva2[0].value('"'  + param2  + '"' );
        divb1[0].value("");
       }
}  // showStep

// executes the instruction given in param1 and param2 on the division
// specified div.  Then it is shown in displayIn using the division name
// in divSt.  Note:  divSt needs to be the user dame for div. 
function execute(div, param1, param2, divSt, displayIn) {
  if (param1 == null  || param2 == null) {
    alert("invalid")
  }
  let s = displayIn.value();
  if (param2 == "") {
    div.style(param1);
    s += divSt + '.style("' + param1 + '");\n';
  } else {
    div.style(param1, param2);
     s +=divSt + '.style("' + param1 + '","' +  param2 +'");\n';
  }
  displayIn.value(s);
}  //execute

// commit() responds to a Commit button being pressed.  The corresponding
// command is issued and displayed unless there was a problem.
function commit() {
  let divVar, divName, commitDisplay;
  let param1, param2; 
  for (let i = 0; i <2; i++) {
    // determine the division and button pressed
    if (this == divaCommit[i] || this == divbCommit[i]) {
       divVar = div[i];  // determine the division
       divName = "div"+ (i+1);  // subscript is 1 less than div number
       commitDisplay = divc[i];  // determine the display to be used
       if (this == divaCommit[i]) { 
          param1 = stripQuotes(diva1[i].value());
          param2 = stripQuotes(diva2[i].value());
       }  else {   // has to be divbCommit[i]  
          param1 = stripQuotes(divb1[i].value());
          param2 = "";
       }  
       break;
     }
   }
  // execute and add to the display unless there was a problem
    if (param1 === false || param2 === false) {
    return;
  }
  execute(divVar, param1, param2, divName, commitDisplay);
}  // commit
    
// Strips the quotes marks from the beginning and end of str.
// Issues an alert if either quote is missing.
// Returns the string striped or false if they missing.
function stripQuotes(str) {
  if (str[0] != '"') {
     alert("Remember the argument <" + str +"> must begin and end with quotes");
     return false;
  } else if (str[str.length-1] != '"') {
     alert("Remember the argument <" + str + "> must end with a quote");
     return false;
  }
  return str.substring(1, str.length-1);
} // end stripQuotes   
     
// Mostly it just assign divisions in the web page to the proper array element.
// It also assigns button press handlers and clears the displays
function setup() {
  div[0] = select("#div1");   // confusion factor: div[0] refers to Div 1
  diva1[0] = select("#div1a1");
  diva2[0] = select("#div1a2");
  divaCommit[0] = select("#div1aCommit");
  divb1[0] = select("#div1b1");
  divbCommit[0] = select("#div1bCommit");
  divc[0] = select("#div1c");  
  dive1[0] = select("#div1e1");
  dive2[0] = select("#div1e2");
  div[1] = select("#div2");  // confusion factor: div[1] refers to Div 2
  diva1[1] = select("#div2a1");
  diva2[1] = select("#div2a2");
  divaCommit[1] = select("#div2aCommit");
  divb1[1] = select("#div2b1");
  divbCommit[1] = select("#div2bCommit");
  divc[1] = select("#div2c"); 
  dive1[1] = select("#div2e1");
  dive2[1] = select("#div2e2");
  div1dTitle = select("#div1dTitle");  // these item only appear in Div 1
  div1d = select("#div1d");
  div1Wait = select("#div1dSlider");
  div1Initialize = select("#div1dInitialize");
  div1Initialize.mousePressed(initialize1)  //  initialize1);
  div1dSlider = select("#div1dSlider");
   // assigns button handers and clear displays
  for (let i = 0; i < 2; i++) {
    divaCommit[i].mousePressed(commit); 
    divbCommit[i].mousePressed(commit);
    divc[i].value("");
  }
} // setup

// standarad draw function that checks to make sure the input is OK
function draw() {
  // these commands color for the attribute in the last section and determine
  // the value for a correct attribute
  for (let i = 0; i < 2; i++) {
    let b = dive1[i].value();
    if (b != "" && b[0] != '"') {
       dive1[i].style("background-color: pink");
    } else if (b.length > 0 && b[b.length-1] != '"') {
       dive1[i].style("background-color:yellow");
    } else {  
       dive1[i].style("background-color:white");
    }  
    if (b.length > 2 && b[b.length-1] == '"') {
       let a = stripQuotes(b);
       if (a != false) {   // a is a valid looking attribute
          let v = (div[i].style(a));
          dive2[i].value(v);
       } else {
       dive2[i].value("......");
       }
    } else {
       dive2[i].value("");
    }
  }
}  // draw

function toggleDisplay(n) {
  let element = div[n-1];   // confusion factor  Div 1 is div[0], ...
  if (element.style("display") === "none") {
    element.style("display", "block");
  } else {
    element.style("display", "none");
  }
}  // toggleVis

function toggleVisibility(n) {
  let element = div[n-1];   // confusion factor  Div 1 is div[0], ...
  if (element.style("visibility") === "hidden") {
    element.style("visibility", "visible");
  } else {
    element.style("visibility", "hidden");
  }
}  // toggleVis