var crops = [];

function makeCroppieElem(elem, imgUrl) {
    cpie = new Croppie(elem, {
        viewport: {
            width: elem.clientWidth,
            height: elem.clientHeight,
            type: 'square'
        },
        showZoomer: false,
    });

    cpie.bind({
        url: imgUrl
    });

    crops.push(cpie)
}

function makeCroppie(collageDivId) {
    const collageDiv = document.getElementById(collageDivId)
    for(elem of collageDiv.getElementsByClassName("collage-img")) {
        makeCroppieElem(elem, elem.dataset.collageImageUrl)
    }
}

function main() {
    makeCroppie("collage")
}

function showCrop() {
    for(cpie of crops) {
        console.log(cpie.get())
        console.log(cpie.element.clientWidth)
        console.log(cpie.element.clientHeight)
    }
}