const single = '2 Bölme';
const double = '3 Bölme';
const triad  = '4 Bölme';
const all = "Hepsi";
const table_wrapper =
"<div class='container-fluid'>"+
    "<div class='row'>"+
        "<div class='col-lg-12 d-flex justify-content-center'>"+
            "<ul id='portfolio-flters'>"+
                "<li data-filter='*' class='filter-active'>"+all+"</li>"+
                "<li data-filter='.filter-120x180'>120x180</li>"+
                "<li data-filter='.filter-150x230'>150x230</li>"+
                "<li data-filter='.filter-160x230'>160x230</li>"+
                "<li data-filter='.filter-170x250'>170x250</li>"+
                "<li data-filter='.filter-200x300'>200x300</li>"+
                "<li data-filter='.filter-250x350'>250x350</li>"+
                "<li data-filter='.filter-300x400'>300x400</li>"+
            "</ul>"+
        "</div>"+
    "</div>"+
    "<div class='portfolio-container'>"+
        "<div class='row portfolio-item filter-120x180'>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+single+"</p><div id='single_120x180'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+double+"</p><div id='double_120x180'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+triad+"</p><div id='triad_120x180'></div></div>"+
        "</div>"+
        "<div class='row portfolio-item filter-150x230'>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+single+"</p><div id='single_150x230'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+double+"</p><div id='double_150x230'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+triad+"</p><div id='triad_150x230'></div></div>"+
        "</div>"+
        "<div class='row portfolio-item filter-160x230'>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+single+"</p><div id='single_160x230'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+double+"</p><div id='double_160x230'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+triad+"</p><div id='triad_160x230'></div></div>"+
        "</div>"+
        "<div class='row portfolio-item filter-170x250'>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+single+"</p><div id='single_170x250'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+double+"</p><div id='double_170x250'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+triad+"</p><div id='triad_170x250'></div></div>"+
        "</div>"+
        "<div class='row portfolio-item filter-200x300'>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+single+"</p><div id='single_200x300'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+double+"</p><div id='double_200x300'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+triad+"</p><div id='triad_200x300'></div></div>"+
        "</div>"+
        "<div class='row portfolio-item filter-250x350'>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+single+"</p><div id='single_250x350'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+double+"</p><div id='double_250x350'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+triad+"</p><div id='triad_250x350'></div></div>"+
        "</div>"+
        "<div class='row portfolio-item filter-300x400'>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+single+"</p><div id='single_300x400'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+double+"</p><div id='double_300x400'></div></div>"+
            "<div class='col-12 col-md-4 p0'><p class='specialRail'>"+triad+"</p><div id='triad_300x400'></div></div>"+
        "</div>"+
    "</div>"+
    "<p>C: Kapasite</p>"+
    "<p>W: Genişlik&nbsp;&nbsp;&nbsp;H: Yükseklik&nbsp;&nbsp;&nbsp;D: Derinlik</p>"+
    "<p>Ölçüler cm</p>"
"</div>";

const capacity = [
    { capS: 10, capD: 20, capT: 30 },
    { capS: 15, capD: 30, capT: 45 },
    { capS: 20, capD: 40, capT: 60 },
    { capS: 25, capD: 50, capT: 75 },
    { capS: 30, capD: 60, capT: 90 }
]
const deep = [72, 109, 138, 168, 198];

const w120 = [{ wS: 270, wD: 386, wT: 525 }]
const w150 = [{ wS: 320, wD: 461, wT: 625 }]
const w160 = [{ wS: 340, wD: 491, wT: 665 }]
const w170 = [{ wS: 360, wD: 521, wT: 705 }]
const w200 = [{ wS: 420, wD: 611, wT: 825 }]
const w250 = [{ wS: 520, wD: 761, wT: 1025}]
const w300 = [{ wS: 620, wD: 911, wT: 1225}]

const h120 = [222, 223];
const h150 = [255, 256];
const h160 = [255, 256];
const h170 = [272, 273];
const h200 = [322, 323];
const h250 = [373, 373];
const h300 = [423, 423];

// 120x180
function createTable(Width, Height, Size,Carpet){
    const single = [
        {"Ebat": "",    "Kod":"RS "+Size+'1'+capacity[0].capS,"C":capacity[0].capS,"W":Width[0].wS,"H":Height[0],"D":deep[0]},
        {"Ebat": "",    "Kod":"RS "+Size+'1'+capacity[1].capS,"C":capacity[1].capS,"W":Width[0].wS,"H":Height[0],"D":deep[1]},
        {"Ebat": Carpet,"Kod":"RS "+Size+'1'+capacity[2].capS,"C":capacity[2].capS,"W":Width[0].wS,"H":Height[0],"D":deep[2]},
        {"Ebat": "",    "Kod":"RS "+Size+'1'+capacity[3].capS,"C":capacity[3].capS,"W":Width[0].wS,"H":Height[0],"D":deep[3]},
        {"Ebat": "",    "Kod":"RS "+Size+'1'+capacity[4].capS,"C":capacity[4].capS,"W":Width[0].wS,"H":Height[1],"D":deep[4]},
    ];
    document.getElementById("single_"+Carpet).innerHTML = jsonToHtmlTable(single);
    const double = [
        {"Ebat": "",    "Kod":"RS "+Size+'2'+capacity[0].capD,"C":capacity[0].capD,"W":Width[0].wD,"H":Height[0],"D":deep[0]},
        {"Ebat": "",    "Kod":"RS "+Size+'2'+capacity[1].capD,"C":capacity[1].capD,"W":Width[0].wD,"H":Height[0],"D":deep[1]},
        {"Ebat": Carpet,"Kod":"RS "+Size+'2'+capacity[2].capD,"C":capacity[2].capD,"W":Width[0].wD,"H":Height[0],"D":deep[2]},
        {"Ebat": "",    "Kod":"RS "+Size+'2'+capacity[3].capD,"C":capacity[3].capD,"W":Width[0].wD,"H":Height[0],"D":deep[3]},
        {"Ebat": "",    "Kod":"RS "+Size+'2'+capacity[4].capD,"C":capacity[4].capD,"W":Width[0].wD,"H":Height[1],"D":deep[4]},
    ];
    document.getElementById("double_"+Carpet).innerHTML = jsonToHtmlTable(double);
    const triad = [
        {"Ebat": "",    "Kod":"RS "+Size+'2'+capacity[0].capT,"C":capacity[0].capT,"W":Width[0].wT,"H":Height[0],"D":deep[0]},
        {"Ebat": "",    "Kod":"RS "+Size+'2'+capacity[1].capT,"C":capacity[1].capT,"W":Width[0].wT,"H":Height[0],"D":deep[1]},
        {"Ebat": Carpet,"Kod":"RS "+Size+'2'+capacity[2].capT,"C":capacity[2].capT,"W":Width[0].wT,"H":Height[0],"D":deep[2]},
        {"Ebat": "",    "Kod":"RS "+Size+'2'+capacity[3].capT,"C":capacity[3].capT,"W":Width[0].wT,"H":Height[0],"D":deep[3]},
        {"Ebat": "",    "Kod":"RS "+Size+'2'+capacity[4].capT,"C":capacity[4].capT,"W":Width[0].wT,"H":Height[1],"D":deep[4]},
    ];
    document.getElementById("triad_"+Carpet).innerHTML = jsonToHtmlTable(triad);
}

document.getElementById("table_wrapper").innerHTML = table_wrapper;
createTable(w120, h120, 120, '120x180');
createTable(w150, h150, 150, '150x230');
createTable(w160, h160, 160, '160x230');
createTable(w170, h170, 170, '170x250');
createTable(w200, h200, 200, '200x300');
createTable(w250, h250, 250, '250x350');
createTable(w300, h300, 300, '300x400');