/* Lab4.js */

"use strict";

var JSONCars = [

	{"regnr" : "AAA111", "fabrikat" : "Volvo", "modell" : "V70", "mil" : "1000"},
	{"regnr" : "BBB222", "fabrikat" : "Saab", "modell" : "95", "mil" : "2000"},
	{"regnr" : "CCC333", "fabrikat" : "Audi", "modell" : "A4", "mil" : "3000"},
	{"regnr" : "DDD444", "fabrikat" : "Fiat", "modell" : "Freemont", "mil" : "4000"},
	{"regnr" : "EEE555", "fabrikat" : "Skoda", "modell" : "Octavia", "mil" : "5000"},
	{"regnr" : "FFF666", "fabrikat" : "Mazda", "modell" : "6", "mil" : "6000"},
	{"regnr" : "GGG777", "fabrikat" : "Kia", "modell" : "Optima", "mil" : "7000"},
	{"regnr" : "HHH888", "fabrikat" : "Honda", "modell" : "Civic", "mil" : "8000"},
	{"regnr" : "III999", "fabrikat" : "Suzuki", "modell" : "Swift", "mil" : "9000"}

];

// Kör dessa funktioner när fönstret är laddat
window.onload = function ()
{
    createTable ();
    createTableHead ( JSONCars.length, JSONCars);
    createTableRow ( JSONCars.length, JSONCars );

};

function createTable ()
{
    // Skapar table och lägger till nödvändiga klasser
    var table = document.createElement ( "table" );
    table.classList.add ( "table" );
    table.classList.add ( "table-striped" );
    table.classList.add ( "table-hover" );

    // Hämtar specifik container och lägger till table
    var container = document.getElementsByClassName ( "container-fluid" ) [0];
    container.appendChild ( table );
}

function createTableHead ( inTrRef, inJSONObject )
{
    // Hittar table
    var table = document.getElementsByClassName ( "table" ) [0];

    // Skapar table head och lägger till det i table
    var tHead = document.createElement ( "thead" );
    table.appendChild ( tHead );

    // Skapar table row och lägger till det i table head
    var tr = document.createElement ( "tr" );
    tHead.appendChild ( tr );

    // Tar fram attribut ur objekt på plats [0] ur arrayen inJSONObject
    var attr = Object.keys ( inJSONObject [ 0 ] );

    // Loopar antal attributer som finns i första objektet i arrayen inJSONObject
    for ( var i = 0; i < attr.length; i++ )
    {
        // Skapar th och lägger till i table row
        var th = document.createElement ( "th" );
        tr.appendChild ( th );

        // Lägger till attribut från objektet
        th.innerHTML += attr [ i ];
    }
}

function createTableRow ( inTrRef, inJSONObject )
{
    // Hittar table, skapar en table body och stoppar in den i table
    var table = document.getElementsByClassName ( "table" ) [ 0 ];
    var tBody = document.createElement ( "tBody" );
    table.appendChild ( tBody );

    // Loopar antal gånger som antal objekt i listan inJSONObject
    for ( var i = 0; i < inTrRef; i++ )
    {
        // Skapar en table row och lägger till i table body
        var tr = document.createElement( "tr" );
        tBody.appendChild ( tr );

        // Tar fram en array med värden ur objekt på plats [i]
        var val = Object.values ( inJSONObject [ i ] );

        // Loopar antal gånger som antal values i objektet
        for ( var j = 0; j < val.length; j++ )
        {
            // Skapar och lägger till table data
            var td = document.createElement ( "td" );
            tr.appendChild ( td );

            // Hämtar ut data från plats [i] och lägger in i html
            var text = document.createTextNode ( val [ j ] );
            td.appendChild ( text );
        }
    }
}