function contextGetter(){
    var c = document.querySelector("#PhotoView")
    

    return c.getContext('2d')
}


async function GetImages(){
    var file = await fetch('imgs/imgs.json')
    var data = await file.json()
    var imgArray = []
    var numberImgs = data.images.length
    data.images.forEach(element => {
        var img = new Image(192,108)
        img.src = 'imgs/'+element
        imgArray.push(img)
    });
    return imgArray
        

    
}


async function LoadImages(Context,ListOfImages){
    var  ImgObjList = []
    var currentX = 672
    var currentY = 378
    var MaxRows = 3
    var MaxCols = 3
    var CurrentRow = 0
    var CurrentCol = 0
    await Promise.all(ListOfImages.map((element)=>{
        return new Promise(resolve => {
            element.onload = function() {
                
                Context.drawImage(element,currentX,currentY,192,108)
                ImgObjList.push({"img":element,
                    "pos":{
                        "x":{
                            "start":currentX,
                            "end": currentX + 192
                        },
                        "y":{
                            "start":currentY,
                            "end": currentY + 108
                        }
                    }
                })
                
                if (CurrentRow == MaxRows - 1 ){
                    CurrentCol++
                    currentY += 110
                    CurrentRow = 0
                    currentX = 672
                }else{
                    currentX += 194
                    CurrentRow++

                }
                resolve();
            }
        });
         
    }));

    
console.log(ImgObjList)    
}

    


export  async function InitializePhotoViewApp(){
    var context = contextGetter();
    var arrayOfImages = await GetImages()
    LoadImages(context,arrayOfImages)


    

    

}