function createElementWithTag_Text_andAppendTo_(tag,text,parent) 
{
    var e = document.createElement(tag);
   e.innerHTML = text;

   parent.appendChild(e);
   return e;
}  

function createLinkWithURL_Tag_Parent_withText_(url,wrapperTag,parent,text)
{
          if(!text) text = url;
           var a = document.createElement("a");
           a.href = url;
           a.innerText = text;
          var wrapper;
          if (wrapperTag)
          {
              wrapper = document.createElement(wrapperTag);
              wrapper.appendChild(a);
           }
          else
               wrapper = a;
           parent.appendChild(wrapper);
           return wrapper;

}






var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML =
`


.center {
  text-align: center;
  
}

body{
  background-color:black;
}

#greetings,#goodbye,#extrainfo{
  background-color: black;
  color: white;
  font-style: italic;
}

a {
    font-style: normal;
}

.metaurl{
  font-size:small;
}

 #resources, #expander{
    background-color: white;
    color: black;
    font-style: normal;
}

#youmayfind, #beloware, #fullnamediv, #theabove{
  font-size: 50px;
  font-weight: bold;
}



#mynameis, #includesextrainfo{
  font-size:30px;
}

#mynameis, #fullnamediv{
  display:none;
}

.resources{
    overflow: hidden;
}

.resourcelinkwrappingspan{
  border-style: outset;
    border-width: thick;
    padding: 4px;
}

.description{
  font-style: italic;
}


.resources{
  height: 20vh;
}

 #expander{
  height: 8vh;
}

#expander, #expander > button{
  font-size:2.5vh;
  
}

#expander > button, #expander > div{
  height:3vh;
  
}


.domainlinkwrapper{
  font-size:35px;
  padding:10px;
}
a:link{

  text-decoration: none; 
}
a:visited{
 
  text-decoration: none; 
}
a:hover{
 
text-decoration: underline;
}
a:active{
text-decoration: underline;
}

.domainlink:link{
  color:cyan;
}
.domainlink:visited{
  color:cyan;
}
.domainlink:hover{
  color:yellow;
}
.domainlink:active{
  color:magenta;
}
.namelisting{

  color:cyan;
  font-style: normal;
}

.resourcelisting0, .resourcelisting1{
  border-style: none none solid none;
  border-color: #bbbbbb;
  font-size: x-large;
}
`;
document.getElementsByTagName('head')[0].appendChild(style);



var center = document.createElement("div");
center.className = 'center';
document.body.appendChild(center);
var greetingdiv = document.createElement("div");
greetingdiv.id = "greetings"
center.appendChild(greetingdiv);
var h2;
var mynameisdiv = createElementWithTag_Text_andAppendTo_("div", "My name is: ",greetingdiv);
mynameisdiv.id = "mynameis";


fullnamediv = document.createElement("div");
fullnamediv.id = "fullnamediv";
for (d of renderParameters.maindomains)
{
  var a = createLinkWithURL_Tag_Parent_withText_
  (  d[0] + "://" + d[1]
    ,""
    ,fullnamediv
    , " " + d[1].replaceAll(".","dot").toUpperCase()
  );
  a.className = "namelisting";
}
greetingdiv.appendChild(fullnamediv);




function createNameListingFromProtocol_Domain_andAppendTo_(protocol, domain,parent)
{
   var div = createElementWithTag_Text_andAppendTo_("div", domain.replaceAll(".","dot").toUpperCase() ,parent);
  var a = createLinkWithURL_Tag_Parent_withText_
  (  protocol + "://" + domain
    ,""
    ,div
    , " " + domain //" ( " +domain+" )"
  );
  a.className = "domainlink";
  
  div.className = "namelisting";
}

//createNameListingFromProtocol_Domain_andAppendTo_(document.location.protocol, document.location.hostname,div);
/*
if (renderParameters.domains.length > 1 )
{
  //createElementWithTag_Text_andAppendTo_("h1", "...one of the "  + renderParameters.domains.length + " renderParameters.domains:",div);
  createElementWithTag_Text_andAppendTo_("h1", "...also known as: "  ,div);
  for (d of renderParameters.domains)
  {
     if (d[1]!=document.location.hostname)
     {
        createNameListingFromProtocol_Domain_andAppendTo_(d[0], d[1],div);
     }
  }
}
*/
var belowarediv = createElementWithTag_Text_andAppendTo_("div", renderParameters.greeting + "<br>",greetingdiv);
 belowarediv.id = "beloware";

/*
function addURLInterpretations(str, arr)
{       
      
       const domain = document.location.hostname
       if (str[0]=="7" || str[0]=="_") 
       {
           str = str.substr(1);
       }
      if (str)
     {
         arr.push(   (domain + "/" + str).toLowerCase()  );
     }
}
*/
function addURLInterpretations(str, arr)
{       
      var domain;
      if(str.indexOf(".")>=0)
      {

          str = str.split("_");
          domain = str[0];
          str = str[1];
      }
        
      else
        domain = document.location.hostname;

      if (str)
     {
         arr.push(   (domain + "/" + str).toLowerCase()  );
     }
}

const loc = document.location;
var URLInterpretations = [];
const hash = loc.hash.substr(1) ;
addURLInterpretations(hash, URLInterpretations);

const path =  loc.pathname.substr(1);

var pathqueries = path.split("/");
for(var p of pathqueries)
  addURLInterpretations(p, URLInterpretations);  


const URLIncludesQuery = hash.length>0 || path.length>0;

var matches = {};
var matchedDomains = {};
var i=-1;
var resourceLocation;
for (interpretation of URLInterpretations) 
{
    resourceLocation = renderParameters.resourceLocations[interpretation];
   if (resourceLocation)
   {
       matches[interpretation] = resourceLocation;
       matchedDomains[interpretation.split("/")[0]] = true;
       delete renderParameters.resourceLocations[interpretation];
   }
}

   

var extrainfodiv = document.createElement("div");
center.appendChild(extrainfodiv);
extrainfodiv.className = "extrainfo";
extrainfodiv.id = "extrainfo";
var resourcesdiv = document.createElement("div");
center.appendChild(resourcesdiv);
resourcesdiv.className = "resources";
resourcesdiv.id = "resources";

var expander = document.createElement("div");
expander.id="expander";
expander.addEventListener
(
  "click"
  , (e) => 
    {/*
      if (appendTo.className == "rinner")
      {
          appendTo.className = "rinnerExpanded";
          
      }
      else
      {
        appendTo.className = "rinner";
      }
      */
      resourcesdiv.className = "resourcesexpanded";
      expander.hidden = true;
      
    }
);

createElementWithTag_Text_andAppendTo_("div","...",expander);
createElementWithTag_Text_andAppendTo_("button","expand list",expander);
center.appendChild(expander);

var goodbye = document.createElement("div");
goodbye.className = "goodbye";
goodbye.id = "goodbye";
center.appendChild(goodbye);



if (URLIncludesQuery)
{

}
const resourceRenderer
=
{


   rendered : {}
  ,render(metaurl,resource,highlight)
  {
    var url = resource.url
    if (!this.rendered[url])
    {
      this.rendered[url]=true;
      var div = document.createElement("div");
      resourcesdiv.appendChild(div);
      //div.appendChild(document.createElement("br"));
      createElementWithTag_Text_andAppendTo_("p",metaurl,div).className="metaurl";
      var span = createLinkWithURL_Tag_Parent_withText_(url,"span",div,url);
      span.className = "resourcelinkwrappingspan";
      span.firstChild.className = "resourcelink";
      div.className = Object.keys(this.rendered).length%2?"resourcelisting1":"resourcelisting0";
      if(highlight)
        div.classList.add("my-class");
      createElementWithTag_Text_andAppendTo_("p",resource.description||"",div).className="description";

    }
  }
};

if(Object.keys(matches).length>0)
{
/*
    createElementWithTag_Text_andAppendTo_ ( "h2" ,"The url in your address bar includes extra information suggesting one of two cases:", appendTo);
    createElementWithTag_Text_andAppendTo_ 
    ( 
        "h2" 
        ,"1. You are looking for a specific interface created/managed by me."
        , appendTo);
    createElementWithTag_Text_andAppendTo_ 
        ( "h2" 

          ,"2. You were referred to this page from a person claiming to be me or an interface claiming to be created/managed by me."
          , appendTo
        );
*/
   createElementWithTag_Text_andAppendTo_
   (
       "div"
       ,  renderParameters.tagFoundSmallText
      ,extrainfodiv
  ).id = "includesextrainfo";

  createElementWithTag_Text_andAppendTo_
  (
       "div"
      , renderParameters.tagFoundBigText(matches.length)
      , extrainfodiv
  ).id = "youmayfind";
/*
  for (resource of matches)
  {
      resourceRenderer.render(resource);
  }
*/
  for (key in matches)
  {
    resourceRenderer.render(key , matches[key]);
  } 
}

/*
nonMatchesCount = Object.keys(renderParameters.resourceLocations).length;
if(nonMatchesCount>0)
{
   createElementWithTag_Text_andAppendTo_
   (
       "h2"
       ,  matches.length>0
            ? "The following resource(s) do not match the specific resource you appear to be looking for, but they are created/managed by me:"
            :  (URLIncludesQuery
                   ? "The url in your address bar suggests you are looking for a specific resource, but all of the resources created/managed by me are listed below:"
                   : "The url in your address bar suggests you are not looking for a specific resource, but all of the resources created/managed by me are listed below:"
               )
      ,appendTo
  );

*/
  const urlParams = new URLSearchParams(window.location.search);
  const hideExtras = urlParams.get('hideExtras') !== null ;
  if (!hideExtras)
  {
      for (key in renderParameters.resourceLocations)
      {
          resourceRenderer.render(key , renderParameters.resourceLocations[key]);
      } 
  }
   createElementWithTag_Text_andAppendTo_("div", renderParameters.goodbye, goodbye).id="theabove";
 //matchedDomains = Object.keys(matchedDomains);
 var allDomains = renderParameters.maindomains.concat(renderParameters.domains);
 var unMatchedDomains = allDomains.filter(e=>!matchedDomains[e[1]]);
 matchedDomains = allDomains.filter(e=>matchedDomains[e[1]]);
  for (d of hideExtras ? matchedDomains:matchedDomains.concat(unMatchedDomains))
  {
    var div 
    = createLinkWithURL_Tag_Parent_withText_
    (  d[0] + "://" + d[1]
      ,"div"
      ,goodbye
      ,  d[1]
    )
    ;
    div.className = "domainlinkwrapper";
    div.getElementsByTagName("a")[0].className = "domainlink";
  }