// combobox.js
// External Javascript to extend some HTML like combobox.html allowing for a dynamically created HTML div element "combobox" (ie. dropdown + div contenteditable=true)
// November, 2020
// Called via ...
//      <script type='text/javascript' src='combobox.js' defer></script>
//   ... or dropdown populated example as per ...
//      <script type='text/javascript' src='combobox.js?ddlist=Asia,Africa,Europe,North%20America,South%20America,Australia,Antarctica' defer></script>

class Droptext {
  constructor(combobox) {
    this.ele = document.createElement('div');
    this.ele.id = ('' + combobox).split(';')[0];
    if (('' + combobox).indexOf(';') != -1) {
      this.ele.setAttribute('data-dropinnards',  ('' + combobox).split(';')[1]);
      this.ele.setAttribute('data-optionval',  "<option value=''></option>");
      this.ele.setAttribute('data-focusaway',  "<input style=position:absolute;top:-200px;left:-200px; type=text value=></input>");
      this.ele.setAttribute('contenteditable', true);
      this.ele.className = "combobox";
      this.ele.innerHTML = ('' + combobox).split(';')[1]; // + "<input style=position:absolute;top:-200px;left:-200px; type=text value=></input>"; 
    }
  }
  present() {
    return this.ele.outerHTML.replace('><select', ' onblur=" var odiv=event.target;  var optval=event.target.getAttribute(' + "'" + 'data-optionval' + "'" + ');  var fway=event.target.getAttribute(' + "'" + 'data-focusaway' + "'" + ');  var umytype=event.target.innerHTML;  var alltogether=event.target.getAttribute(' + "'" + 'data-dropinnards' + "'" + ').split(String.fromCharCode(60) + ' + "'" + '/select' + "'" + ')[0]; if (umytype.trim().length == 0) {   odiv.innerHTML = event.target.getAttribute(' + "'" + 'data-dropinnards' + "'" + '); } else if (alltogether.indexOf(String.fromCharCode(62) + umytype + String.fromCharCode(60)) != -1) {   odiv.innerHTML = alltogether.replace(String.fromCharCode(62) + umytype + String.fromCharCode(60), ' + "' selected'" + ' + String.fromCharCode(62) + umytype + String.fromCharCode(60)) + event.target.getAttribute(' + "'" + 'data-focusaway' + "'" + ');   } else {  alltogether+=optval.replace(String.fromCharCode(39),  String.fromCharCode(39) + umytype).replace(String.fromCharCode(62), String.fromCharCode(62) + umytype);  alltogether+=String.fromCharCode(60) + ' + "'" + '/select' + "'" + ' + String.fromCharCode(62); odiv.innerHTML = fway; odiv.innerHTML = alltogether.replace(String.fromCharCode(62) + umytype + String.fromCharCode(60), ' + "' selected'" + ' + String.fromCharCode(62) + umytype + String.fromCharCode(60)) + event.target.getAttribute(' + "'" + 'data-focusaway' + "'" + '); odiv.setAttribute(' + "'" + 'data-dropinnards' + "'" + ',alltogether); }  " onkeypress=" event.target.setAttribute(' + "'" + 'data-sofar' + "'" + ', event.target.innerHTML); " onkeydown="  if (event.target.innerHTML.indexOf(String.fromCharCode(60)) != -1) { event.target.innerHTML=' + "''" + ';  } "><select');
  }
}

class Contents extends Droptext {
  constructor(combobox, mod) {
    if (('' + combobox) == '') {
      var iinn=0;
      while (document.getElementById('combobox' + iinn)) {
        iinn++;
      }
      combobox = 'combobox' + iinn;
    }
    super((combobox + ';' + mod));
    this.dropinnards = mod;
  }
  show() {
    return this.present() + "<input style=position:absolute;top:-200px;left:-200px; type=text value=></input>"; // + ', it is a ' + this.dropinnards;
  }
}

var ihs, selconts=[], selcont='', mycombobox=null, obody=null, ofound=false, jiip=0, iip=0, obs=[], ihsobs=[], iqw=0, ihsuff='', isokay=true, ioff=0, alle=[], ialle=0, sparebody=null;
ihs = "";
if (document.title != document.title.trim()) {
ihsobs = (" ").split('?ddlist=');
} else {
ihsobs = (document.head.innerHTML + document.body.innerHTML).replace(/\&ddlist\=/g,'?ddlist=').split('?ddlist=');
}
if (ihsobs.length > 2) {
  ioff = -1;
  ihs = decodeURIComponent((document.head.innerHTML + document.body.innerHTML).replace('&ddlist=','?ddlist=').split('?ddlist=')[1].split('&')[0].split('"')[0].split("'")[0]); // + ',';
  if (document.URL.indexOf('ddlist=' + encodeURIComponent(ihs)) == -1) {
    if (document.URL.indexOf('?') == -1) {
      location.href = document.URL.split('#')[0] + '?ddlist=' + encodeURIComponent(ihs);
      ioff = -11;
    } else {
      location.href = document.URL.split('#')[0] + '&ddlist=' + encodeURIComponent(ihs);
      ioff = -11;
    }
  } else {
    document.title+=' ';
  }
} else if (ihsobs.length == 2) {
  ioff = -1;
}
for (iqw=1; iqw<=eval(ioff + eval('' + ihsobs.length)); iqw++) {
ihs="";
isokay=true;
selconts = location.search.split('ddlist=')[1] ? (ihs + decodeURIComponent(location.search.split('ddlist=')[1].split('&')[0])).split(',') : (ihs + "<select><option value=''></option><option value='Red'>Red</option><option value='Blue'>Blue</option><option value='Yellow'>Yellow</option></select>").split(',');
if ((document.head.innerHTML + document.body.innerHTML).replace(/\&ddlist\=/g,'?ddlist=').indexOf('?ddlist=') != -1) {
  ihs = decodeURIComponent((document.head.innerHTML + document.body.innerHTML).replace(/\&ddlist\=/g,'?ddlist=').split('?ddlist=')[iqw].split('&')[0].split('"')[0].split("'")[0]); // + ',';
  if (ihs.trim() != '') { selconts = ihs.split(','); }
  if (ihsobs.length > 2) {
    isokay = false;
    if (iqw > 1) {
      selconts = ihs.split(',');
    }
    if (1 == 1 || document.URL.indexOf('ddlist=' + encodeURIComponent(ihsobs[1].split('&')[0].split('"')[0].split("'")[0])) != -1) {
      isokay=true;
    }
  }
}
if (isokay) { console.log('yay ' + ioff + ' ' + ihsobs.length + ' ' + document.URL); } else {  console.log('oops ' + ioff + ' ' + ihsobs.length + ' ' + document.URL + ' versus ' + 'ddlist=' + encodeURIComponent(ihsobs[1].split('&')[0].split('"')[0].split("'")[0]));   }
if (isokay) {
if (selconts[0].indexOf('<select') != 0) {
 selcont = ("<select class=combobox name=selcombo" + ihsuff + ">").replace(" name=selcombo>", " name=selcombo0>");
 for (jiip=0; jiip<selconts.length; jiip++) {
  if (selconts[jiip].indexOf('<select') != 0) {
    selcont += '<option value="' + selconts[jiip] + '">' + selconts[jiip] + '</option>';
  }
 }
 selcont += "</select>";

 console.log('' + iqw + ':' + ihs + ' ' + selcont);

 if (mycombobox) {
 eval('mycombobox' + ihsuff + ' = new Contents("", selcont)');
 } else {
 mycombobox = new Contents("", selcont);
 }
} else {


 console.log('' + iqw + ';');


 if (mycombobox) {
 eval('mycombobox' + ihsuff + ' = new Contents("", selconts[0])');
 } else {
 mycombobox = new Contents("", selconts[0]);
 }
}
obody = document.body;
sparebody=null;
alle=document.getElementsByTagName('*');
for (ialle=0; ialle<alle.length; ialle++) {
  if (!sparebody && ('' + alle[ialle].innerHTML) == '' && alle[ialle].outerHTML.indexOf('></') != -1 && alle[ialle].outerHTML.indexOf('<script') == -1) {
    sparebody=alle[ialle];
  }
}
if (sparebody) { 
  obody = sparebody;
} else if (document.getElementById('demo' + ihsuff)) {
  obody = document.getElementById('demo' + ihsuff);
} else {
  ofound = false;
  obs = document.getElementsByTagName('div');
  for (iip=0; iip<obs.length; iip++) {
    if (obs[iip].innerHTML == '') { 
     obody = obs[iip]; 
     ofound = true;
    }
  }
  if (!ofound) {
    obody.innerHTML += '<div style=inline-block; id=demo' + ihsuff + '></div>';
    obody = document.getElementById('demo' + ihsuff);
  }
}
eval('obody.innerHTML += mycombobox' + ihsuff + '.show()');
document.title+=' ';
}
ihsuff='' + eval(0 + iqw);
}