//Get the body of where the tiles will be displayed
const mainBody  = document.getElementById('fabricsBody');

//Tiles are stored in an array, first element is the title, the second is the image, and the third is the pdf
var titles = [
    "D 0124", "website_pictures/fabrics_jpgs/D_0124.jpg", "pdfs/fabrics_pdfs/D_0124.pdf",
    "D 0125", "website_pictures/fabrics_jpgs/D_0125.jpg", "pdfs/fabrics_pdfs/D_0125.pdf",
    "D 0126", "website_pictures/fabrics_jpgs/D_0126.jpg", "pdfs/fabrics_pdfs/D_0126.pdf",
    "D 0127", "website_pictures/fabrics_jpgs/D_0127.jpg", "pdfs/fabrics_pdfs/D_0127.pdf",
    "D 0128", "website_pictures/fabrics_jpgs/D_0128.jpg", "pdfs/fabrics_pdfs/D_0128.pdf",
    "D 0129", "website_pictures/fabrics_jpgs/D_0129.jpg", "pdfs/fabrics_pdfs/D_0129.pdf",
    "D 0130", "website_pictures/fabrics_jpgs/D_0130.jpg", "pdfs/fabrics_pdfs/D_0130.pdf",
    "D 0131", "website_pictures/fabrics_jpgs/D_0131.jpg", "pdfs/fabrics_pdfs/D_0131.pdf",
    "D 0132", "website_pictures/fabrics_jpgs/D_0132.jpg", "pdfs/fabrics_pdfs/D_0132.pdf",
    "D 0133", "website_pictures/fabrics_jpgs/D_0133.jpg", "pdfs/fabrics_pdfs/D_0133.pdf",
    "D 0134", "website_pictures/fabrics_jpgs/D_0134.jpg", "pdfs/fabrics_pdfs/D_0134.pdf",
    "D 0135", "website_pictures/fabrics_jpgs/D_0135.jpg", "pdfs/fabrics_pdfs/D_0135.pdf",
    "D 0136", "website_pictures/fabrics_jpgs/D_0136.jpg", "pdfs/fabrics_pdfs/D_0136.pdf",
    "D 0137", "website_pictures/fabrics_jpgs/D_0137.jpg", "pdfs/fabrics_pdfs/D_0137.pdf"
];
  
//get the length of how many tiles there are
var len = titles.length;

//Initialize the table
var html = "<table id='fabricsTable'><tr>";

//Loop through the titles array and add the tiles to the table
//Each tile utilizes 3 array slots in the title, image, and pdf link so the loop increments by 3
for (var i = 0; i < len; i += 3) {
    //End off and start a new row every 3 tiles
    if (i % 9 == 0) {
        html += "</tr><tr>";
    }
    html += `<td><div class='tile' ><img src="${titles[i+1]}" class='tileImg'><br /><button class='tileBtn' onclick="window.location.href='${titles[i+2]}';">${titles[i]}</button> </div><br /><br /></td>`;
}

//CLose the final row and end the table
html += "</tr></table>";

//Write the table to the body
mainBody.innerHTML = html;