// JavaScript Document   C:\w3\popDev IT\userSite\grid-images-docs-to-upload.js.php
//var gjs_popupModal=gjs_popupModalTool=null;    

//xline=4;if(1)alert("line "+xline+" \n grid-images-docs-to-upload.js.php= "+"displayed");// images uploaded  //!\warning: 

var xfileInput=GridOfImages=null;
var spanxfileInput=tableBody=imagesMultiple=imagesDir=numimagesDir=html=tfiles=ttrnbrrow=distantDIRS=null;

function getIHMofPanelGridImages(p_page){
xline=10;if(0)alert("line "+xline+" \n p_page= "+p_page);

document.open();//document.write(p_page);document.close();
document.write(`<div class="modal" id="modal" style="margin:0;padding:0;height:100%;display:block;">`);//  voile opaque
// middle conteneur avant modal-container mais si 'none' enlève la protection translucide'
document.write(`<div class="modal-back" style="display:block;"></div>`);
document.write(`<div class="modal-container" style="margin:0;padding:0;padding:2;height:auto;" title="modal gjs_totalDisplayDate">`);
//document.close();
//=====
//if(!dir)let dir=`../resources/images`;
// {whatType:whatType,dir:dir,title:title}
//isparent=(window.parent.getPopModalOfBarTop);params={whatType:null,dir:`./resources/images`,title:`gridimages`};
//document.write(isparent?getPopModalOfBarTop(params):parent.getPopModalOfBarTop(params));
if(window.parent.getPopModalOfBarTop)document.write(window.parent.getPopModalOfBarTop(params));

//=====
infos=1; // donc les informations apparaissent en bas sinon elles sont cachées
//height=(infos?`80%`:`95.4%`);
height=(infos?`50%`:`50%`);
//height=(infos?`50%`:`20%`);

//document.write(`<div style="border-left:solid 2px white;background:orange;height:85.95%!important;">`);
//document.write(`<div style="border-left:solid 2px white;background:orange;height:${height}!important;">`);
//document.open();//document.write(p_page);document.close();

//document.write(`<div style="border-left:solid 2px white;background:white;height:${height}!important;">`);
document.write(`<div style="border-left:solid 2px white;background:white;height:20%!important;">`);

//document.write(`content maintenant`);
//x=`< ? php echo $ p_page; ? >`;
  //document.write("<h1>Out with the old, in with the new!</h1>");
//==============
//==============    start grid image à partir de php
//==============
document.write(p_page);p_page=null;
//==============
//==============    endt grid image à partir de php
//==============
document.write(`</div>`);
//

//display=(infos?`block`:`none`);// les informations

if(0&&window.getInformationIHM)getInformationIHM(infos);//!\warning:suppression d'infos mais peut être faut-il pouvoir informer le développement


//document.open();//document.write(p_page);document.close();
document.write(`</div></div>`);
//document.write(`</div>`);
document.close();
}


function getIHMofPanelGridImagesFileInput(){

xfileInput = document.getElementById("xfileInput");//xfileInput.value = '';
xline=57;if(0)alert("line "+xline+" \n xfileInput= "+xfileInput);

if(xfileInput){
xfileInput.onchange = function(e) {
imgZoom=document.getElementById("imageWithZoom");
    var files = this.files;
//    var html = [];
    tfiles=this.files;

    // iterate over all files
    for(var file of files) {

// https://www.developpez.net/forums/d1252865/javascript/general-javascript/recuperer-vrai-path-d-input-file-js/    
    reader = new FileReader();
    reader.readAsDataURL(file);
    
    path = (window.URL || window.webkitURL).createObjectURL(file);
//https://www.edureka.co/community/71993/selected-change-input-type-file-using-javascript-jquery-ajax

//var tmppath = URL.createObjectURL(event.target.files[0]);
var tmppath = URL.createObjectURL(file);

xline=69;if(1)alert("line "+xline+" \n reader= "+Object.entries(reader)+" \n path= "+path
+" \n file.mozFullPath= "+file.mozFullPath+" \n tmppath= "+tmppath
);
    
    x=file.type.split(`image/`);
    if(!x[1]){
       alert(file.name+` `+`n est pas une image`);return;
    
    }

//myTable = tableBody.getElementsByTagName("table")[0];
//myTableBody = tableBody.getElementsByTagName("tbody")[0];
//myRow = myTableBody.getElementsByTagName("tr")[1];
//myCell = myRow.getElementsByTagName("td")[1];
  //  numimagesDir++;// tableBody.rows

  //  xnum=tableBody.rows.length;
//    xnum=myTableBody.rows;
//    rows = table.getElementsByTagName('tbody')[0].rows;
//    rows = table.getElementsByTagName('tbody')[0].rows;
    //    properties=jsMinElementHTML.GetId(`NbrFiles`);
    //    selectedIndex=properties.selectedIndex;//=3;

    //selectedIndex=document.getElementById(`NbrFiles`).selectedIndex;
//    w=document.getElementById(`NbrFiles`).options[properties.selectedIndex].value;
    
    if(0&&xnum){
        w=properties.element.value;
         alert(`xnum= `+xnum+`\n w= `+w);//[0]);Object.entries(xnum));//[0]);

/*
        // if(parseInt(w)>=3){alert(`Le nombre d\`images ne doit pas dépasser à `+xnum);return;}
         if(0&&xnum&&xnum>=3){
//<label for="xfileInput" id="labelxfileInput" style="padding:2;margin:0;display:none;" onclick="return(true);">
     l=document.getElementById(`labelxfileInput`).setAttribute(`onclick`,`return(false);`);
     document.getElementById(`ixfileInput`).style.display=`inline`;    
             alert(`Le nombre d\`images ne doit pas dépasser à `+xnum);return;
             
             }
             */
    }

//    alert("Object.entries(this.files)= "+Object.entries(this.files)
//    +"\n"+"file= "+file);
    
    if (file) {
        if (file.size <= 200000)
            success="OK";//console.log("OK");
        else
            success="TOO";//console.log("Limit Exceeded!");
    }    
        // generate row markup for each file
//        https://jsnoteclub.com/blog/how-to-iterate-table-rows-in-javascript/
//  https://www.softline.fr/foreach-js/
//  https://www.softline.fr/christina-stathopoulos-plongez-dans-le-sql-pour-les-non-programmeurs/
//https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/rowIndex
//        html.push(`<td>${file.name}</td><td>${file.type}</td><td>${file.size}</td><td>${success}</td><td onclick="testdeleteRowTable(`+this+`,`+files+`);"><img src="logo.jpg" id=""/></td>`);
//row=tableBody.row;
ttrnbrrow++;//row.rowIndex
        html.push(`<td align="center" style="min-width:50;max-width:50;">${ttrnbrrow}<input type="checkbox"/><input type="radio"/></td>
        <td align="center" style="min-width:50;max-width:200;">${file.name}</td>
        <td align="center">${file.type}</td>
        <td align="center">${file.size}</td>
        <td align="center">${success}</td>
        <td align="center" onclick="testdeleteRowTable(this);"><img src="./resources/images/trash-can_115312.svg" id="`+file.name+`" style="width:15;height:18;"/></td>`);
// C:\w3\popDev IT\resources\images
//image/jpg   image/png  image/svg+xml    ,  text/css
 //       y=imagesDir+`/`+file.name;z=`photos`+`/`+`case`+`1`;
      //  zz=path.split(`blob:`);// blob:http://127.0.0.1/69b786ab-c190-4cd5-a6d4-743b3be267c6/fixedmichelbj.jpg
     //   y=zz[1]+`/`+file.name;z=`photos`+`/`+`case`+`1`;
        
//        y=tmppath+`/`+file.name;z=`photos`+`/`+`case`+`1`;
        y=tmppath;z=`photos`+`/`+`case`+`1`;
        
        imagesMultiple.innerHTML+=`<span id="${file.name}"><img name="arrayImages" src="${y}" data-dest="${z}" title="${file.name}" style="margin:2;width:30;height:25;" onclick="if(imgZoom)imgZoom.style.backgroundImage='url(${y})';"/><br/>photos ${ttrnbrrow}</span>`;
//        imagesMultiple.innerHTML+=`<span id="`+file.name+`"><img name="arrayImages" src="`+y+`" data-dest="`+z+`" title="`+file.name+`" style="margin:2;width:100;height:85;" /><br/>photos `+ttrnbrrow+`</span>`;
    }

    // finally create all table rows
    // and add them the tbody element
    tableBody.innerHTML = '<tr>' + html.join('</tr><tr>') + '</tr>';
    
    DisplayDataOpen(0);
    
    autoriseImagesSearch();//xnum);//,selectedIndex);
/*    
             if(xnum&&xnum+1>=3){
//<label for="xfileInput" id="labelxfileInput" style="padding:2;margin:0;display:none;" onclick="return(true);">
     l=document.getElementById(`labelxfileInput`);
     l.setAttribute(`onclick`,`return(false);`);
     s=document.getElementById(`spanxfileInput`);
     s.style.display=`none`;
     i=document.getElementById(`ixfileInput`);  
     i.style.display=`inline`;
     i.innerHTML=`Le nombre d\`images ne doit pas dépasser à `+(selectedIndex+1); // 
//     i.innerHTML=``Le nombre d\`images ne doit pas dépasser à `+(xnum+1)`; // selectedIndex
         
     //        alert(`Le nombre d\`images ne doit pas dépasser à `+(xnum+1));
    //         return;
             
             }
             */

};

xfileInput.style.backgroundColor='yellow';


spanxfileInput = document.getElementById("spanxfileInput");
spanxfileInput.style.width='20px';

tableBody = document.getElementById("desc");
imagesMultiple = document.getElementById("imagesMultiple");
imagesDir=js$Obj$KV$FS$FilesOfSite.imagesDir;//`../../../atelier/steganography-main`;
if(1)alert('imagesDir= '+imagesDir);
numimagesDir=numimagesDirDel=-1;
html = [];
//    var imvDiv = [];
tfiles;
ttrnbrrow=0;

distantDIRS={
   case1:`distantDIRS/systemboost.entreprise/photos/case1`
};
distantDIRS.case2=distantDIRS.case1;
distantDIRS.case3=distantDIRS.case1;
distantDIRS.case4=distantDIRS.case1;

distantDIRS={
   case1:`/localDIRS/namesite/photos/case1`
};
distantDIRS.case2=distantDIRS.case1;
distantDIRS.case3=distantDIRS.case1;
distantDIRS.case4=distantDIRS.case1;

GridOfImages={// GridOfImages.PlugFctDisplayDatas   ,  ridOfImages.PlugFctPostDatas 
 PlugFctDisplayDatas:window.DisplayDataOpen
,PlugFctPostDatas:window.sendDataOpen
};



} else {index=2;if(0)alertError('No change for uploads',index);};

};
//================================
function fctjs_popupModal_OpenOrClose(gjs_popup,what){
//alert(`line 863 what= `+what);
if(gjs_popup&&what){
    if(what==`close`)
          x=`none`;
    else
        if(what==`open`)
             x=`block`;
        else
             x=(what==`none`?`block`:`none`);
    gjs_popup.style.display=x;// pour afficher la première fois
}
//force    
///gjs_popupModal.style.display=`block`;    
};
//================================
function xxxgetInformationIHM(infos){// for popmodal
display=(infos?`block`:`none`);
document.open();//document.write(p_page);document.close();
document.write(`<div title="grid-images-docs-to-upload.js.php" style="width:99.5%;position:fixed;bottom:0;font-size:8.5pt;border-left:solid 1px transparent;background:yellow;height:auto;display:${display};">`);
document.write(`<div style="width:100%;background-color:pink;">les informations now (hier-today-demain-après) avec accordéon de configuration</div>`);
document.write(`<div style="width:100%;">les informations développement (site, autres) avec accordéon de configuration etc...</div>`);
document.write(`<div style="width:100%;background-color:pink;">les informations locales</div>`);
document.write(`<div style="width:100%;">les informations nationales</div>`);
document.write(`<div style="width:100%;background-color:pink;">les informations internationales</div>`);
document.write(`<div style="width:100%;">les informations outils ?</div>`);
document.write(`</div>`);
document.close();
};


if(0){
var xfileInput = document.getElementById("xfileInput");//xfileInput.value = '';
xline=235;if(0)alert("line "+xline+" \n xfileInput= "+xfileInput);

if(xfileInput){
xfileInput.onchange = function(e) {
    var files = this.files;
//    var html = [];
    tfiles=this.files;

    // iterate over all files
    for (var file of files) {
    
    x=file.type.split(`image/`);
    if(!x[1]){
       alert(file.name+` `+`n est pas une image`);return;
    
    }

//myTable = tableBody.getElementsByTagName("table")[0];
//myTableBody = tableBody.getElementsByTagName("tbody")[0];
//myRow = myTableBody.getElementsByTagName("tr")[1];
//myCell = myRow.getElementsByTagName("td")[1];
  //  numimagesDir++;// tableBody.rows

  //  xnum=tableBody.rows.length;
//    xnum=myTableBody.rows;
//    rows = table.getElementsByTagName('tbody')[0].rows;
//    rows = table.getElementsByTagName('tbody')[0].rows;
    //    properties=jsMinElementHTML.GetId(`NbrFiles`);
    //    selectedIndex=properties.selectedIndex;//=3;

    //selectedIndex=document.getElementById(`NbrFiles`).selectedIndex;
//    w=document.getElementById(`NbrFiles`).options[properties.selectedIndex].value;
    
    if(0&&xnum){
        w=properties.element.value;
         alert(`xnum= `+xnum+`\n w= `+w);//[0]);Object.entries(xnum));//[0]);

/*
        // if(parseInt(w)>=3){alert(`Le nombre d\`images ne doit pas dépasser à `+xnum);return;}
         if(0&&xnum&&xnum>=3){
//<label for="xfileInput" id="labelxfileInput" style="padding:2;margin:0;display:none;" onclick="return(true);">
     l=document.getElementById(`labelxfileInput`).setAttribute(`onclick`,`return(false);`);
     document.getElementById(`ixfileInput`).style.display=`inline`;    
             alert(`Le nombre d\`images ne doit pas dépasser à `+xnum);return;
             
             }
             */
    }

//    alert("Object.entries(this.files)= "+Object.entries(this.files)
//    +"\n"+"file= "+file);
    
    if (file) {
        if (file.size <= 200000)
            success="OK";//console.log("OK");
        else
            success="TOO";//console.log("Limit Exceeded!");
    }    
        // generate row markup for each file
//        https://jsnoteclub.com/blog/how-to-iterate-table-rows-in-javascript/
//  https://www.softline.fr/foreach-js/
//  https://www.softline.fr/christina-stathopoulos-plongez-dans-le-sql-pour-les-non-programmeurs/
//https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/rowIndex
//        html.push(`<td>${file.name}</td><td>${file.type}</td><td>${file.size}</td><td>${success}</td><td onclick="testdeleteRowTable(`+this+`,`+files+`);"><img src="logo.jpg" id=""/></td>`);
//row=tableBody.row;
ttrnbrrow++;//row.rowIndex
        html.push(`<td align="center" style="min-width:50;max-width:50;">${ttrnbrrow}<input type="checkbox"/><input type="radio"/></td>
        <td align="center" style="min-width:50;max-width:200;">${file.name}</td>
        <td align="center">${file.type}</td>
        <td align="center">${file.size}</td>
        <td align="center">${success}</td>
        <td align="center" onclick="testdeleteRowTable(this);"><img src="../resources/images/trash-can_115312.svg" id="`+file.name+`" style="width:15;height:18;"/></td>`);
// C:\w3\popDev IT\resources\images
//image/jpg   image/png  image/svg+xml    ,  text/css
        y=imagesDir+`/`+file.name;z=`photos`+`/`+`case`+`1`;
        imagesMultiple.innerHTML+=`<span id="`+file.name+`"><img name="arrayImages" src="`+y+`" data-dest="`+z+`" title="`+file.name+`" style="margin:2;width:100;height:85;" /><br/>photos `+ttrnbrrow+`</span>`;
    }

    // finally create all table rows
    // and add them the tbody element
    tableBody.innerHTML = '<tr>' + html.join('</tr><tr>') + '</tr>';
    
    DisplayDataOpen(0);
    
    autoriseImagesSearch();//xnum);//,selectedIndex);
/*    
             if(xnum&&xnum+1>=3){
//<label for="xfileInput" id="labelxfileInput" style="padding:2;margin:0;display:none;" onclick="return(true);">
     l=document.getElementById(`labelxfileInput`);
     l.setAttribute(`onclick`,`return(false);`);
     s=document.getElementById(`spanxfileInput`);
     s.style.display=`none`;
     i=document.getElementById(`ixfileInput`);  
     i.style.display=`inline`;
     i.innerHTML=`Le nombre d\`images ne doit pas dépasser à `+(selectedIndex+1); // 
//     i.innerHTML=``Le nombre d\`images ne doit pas dépasser à `+(xnum+1)`; // selectedIndex
         
     //        alert(`Le nombre d\`images ne doit pas dépasser à `+(xnum+1));
    //         return;
             
             }
             */

};

xfileInput.style.backgroundColor='yellow';

var spanxfileInput = document.getElementById("spanxfileInput");
spanxfileInput.style.width='20px';

var tableBody = document.getElementById("desc");
var imagesMultiple = document.getElementById("imagesMultiple");
var imagesDir=js$Obj$KV$FS$FilesOfSite.imagesDir;// `../../../atelier/steganography-main`;
var numimagesDir=numimagesDirDel=-1;
var html = [];
//    var imvDiv = [];
var tfiles;
var ttrnbrrow=0;

var distantDIRS={
   case1:`distantDIRS/systemboost.entreprise/photos/case1`
};
distantDIRS.case2=distantDIRS.case1;
distantDIRS.case3=distantDIRS.case1;
distantDIRS.case4=distantDIRS.case1;

distantDIRS={
   case1:`/localDIRS/namesite/photos/case1`
};
distantDIRS.case2=distantDIRS.case1;
distantDIRS.case3=distantDIRS.case1;
distantDIRS.case4=distantDIRS.case1;

var GridOfImages={// GridOfImages.PlugFctDisplayDatas   ,  ridOfImages.PlugFctPostDatas 
 PlugFctDisplayDatas:window.DisplayDataOpen
,PlugFctPostDatas:window.sendDataOpen
};



} else {
index=2;if(0)alertError('No change for uploads',index);
};

};//end


/*
//if(x)x.style.display="none";

//fctjs_popupModal_OpenOrClose(what);
//alert(`line 1006 what= `+what);
if(0){
if(gjs_popupModal&&what){
    if(what==`close`)
          x=`none`;
    else
          x=(what==`none`?`block`:`none`);
    gjs_popupModal.style.display=x;// pour afficher la première fois
    }
}
//force    
///gjs_popupModal.style.display=`block`;    


*/