function makeCache(list,size){
 let cache = [];
 var size = size ||10;
 function fillCache(){
  while (cache.length < size && list.length>0){
   let file = list.shift();//pop first
   console.log("caching file:"+file.name)
   let reader = new FileReader();  
   reader.readAsDataURL(file);
   
   reader.domelem = undefined;
   reader.name = file.name;
   /*reader.onload=function(e){//slow, jumpy, ram hungry
    console.log("created img tag for:"+reader.name)
    reader.domelem = document.createElement("img");
    reader.domelem.setAttribute('src', reader.result);
    reader.domelem.setAttribute('id', "mainImage");
    reader.domelem.setAttribute('style', "display:block");
   }*/
   cache.push(reader);
  }
 }
 function next(){
  fillCache();
  let reader = cache.shift()
  if (reader === undefined){
   return undefined;
  }
  if(reader.readyState === FileReader.DONE){
   return reader;
  }
  else{
   console.log("warning: file not loaded");
   cache.unshift(reader);
   return null;
  }
 }
 function test(){
  console.log(list);
  console.log(size);
  console.log(cache);
 }
 fillCache()//initialize cache
 return {"next":next,"test":test};
};


function displayImage(cache,domelem,delay){
 let reader = cache.next();
 if(reader === undefined){
  console.log("done");
  domelem.style.display="none";
  document.getElementById("config").style.display="block";
 }
 else{
  if(reader){//if cache ready 
   //domelem.replaceWith(reader.domelem);
   //setTimeout(displayImage,delay,cache,reader.domelem,delay);
   domelem.src=reader.result;
   setTimeout(displayImage,delay,cache,domelem,delay);
  }
  else{
   console.log("waiting")
   setTimeout(displayImage,delay,cache,domelem,delay);
  }
  
 }
}

Date.prototype.addHours= function(h){
    this.setHours(this.getHours()+h);
    return this;
}

//set current date
document.getElementById('datePicker').defaultValue = (new Date).addHours(3).toISOString().slice(0,-5);

document.getElementById("filePicker").onchange=function(){
 let files=Array.from(this.files);
 let names= files.map(file => file.name);
 document.getElementById("fileNames").innerText = "filenames:\n"+names.join("\n");
 console.log(names);

};

//demo mode:
if (document.location.hash === "#demo"){
document.getElementById("mainImage").style.display="block";
document.getElementById("mainImage").src="testimages/IMG_20150912_10_59_42_NX2000.jpg"
document.getElementById("config").style.display="none";
}

document.getElementById("startButton").onclick=function(){
console.log("starting");
let dateInput = document.getElementById("datePicker");
console.log("date valid:"+dateInput.checkValidity());
console.log(dateInput.value);


document.getElementById("mainImage").style.display="block";
document.getElementById("config").style.display="none";

let files = Array.from(document.getElementById("filePicker").files);
let img = document.getElementById("mainImage");
let delay = document.getElementById("delayPicker").value;
let cache = makeCache(files,50);
let mode = document.querySelector('input[name="modeSelector"]:checked').value;

setTimeout(displayImage,delay,cache,img,delay);

console.log(cd2)
if (mode==="countdown"){
  cd2.Div                 = "clock2";
  cd2.DisplayFormat = "<span class=\"clock\">%%D%%  %%H%% : %%M%% : %%S%%</span>"

  cd2.TargetDate = dateInput.value;
  cd2.Setup();
}
if (mode==="clock"){
  cd2 = new clock("cd2");
  cd2.Div  = "clock2";
  cd2.DisplayFormat = "<span class=\"clock\">%%H%% : %%M%%</span>"
  cd2.Setup();
}


};

/*snippets
reader = new FileReader();
reader.readAsDataURL(Array.from(document.getElementById("filePicker").files)[0]);

files=Array.from(document.getElementById("filePicker").files);
files.forEach((file)=>{console.log(file.name)})



c=makeCache(Array.from(document.getElementById("filePicker").files),10)
c.next()


tag= document.createElement("img");
tag.setAttribute('id', "mainImage");
tag.setAttribute('src', "testimages/1.jpg");
tag.setAttribute('style', "display:block");
document.getElementById("mainImage").replaceWith(tag)
*/
function clock(obj)
{
          this.obj                = obj;
          this.Div                = "clock";
          this.BackColor          = "white";
          this.ForeColor          = "black";
          this.TargetDate         = "11/22/2013 5:00 AM";
          this.DisplayFormat      = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
          this.CountActive        = true;

          this.DisplayStr;

          this.Update              = cl_Update;
          this.Setup              = cl_Setup;
}

function cl_Update()
{   
    let d = new Date()
    this.DisplayStr = this.DisplayFormat.replace(/%%D%%/g,"");
    this.DisplayStr = this.DisplayStr.replace(/%%H%%/g, d.getHours());
    this.DisplayStr = this.DisplayStr.replace(/%%M%%/g, d.getMinutes());
    this.DisplayStr = this.DisplayStr.replace(/%%S%%/g,"");

    document.getElementById(this.Div).innerHTML = this.DisplayStr;
    let obj = this;
  if (obj.CountActive) {
    setTimeout(function(){
      obj.Update()
    },1000
    );
  }
}
function cl_Setup()
{
          this.Update();
}