var myData = [];

var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() {
        if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
            aCallback(anHttpRequest.responseText);
        }
        anHttpRequest.open( "GET", aUrl, true );
        anHttpRequest.send( null );
    }
}

var theurl='data.json';
var client = new HttpClient();
client.get(theurl, function(response) {
    myData = JSON.parse(response);
});

var DV1 = document.getElementById("DV1");
var DV2 = document.getElementById("DV2");
var DV3 = document.getElementById("DV3");
var DV4 = document.getElementById("DV4");
var DV5 = document.getElementById("DV5");
var DV6 = document.getElementById("DV6");

var DV1selection = ""
var DV2selection = ""
var DV3selection = ""
var DV4selection = ""
var DV5selection = ""

extDV1.style.visibility='hidden'
extDV2.style.visibility='hidden'
extDV3.style.visibility='hidden'
extDV4.style.visibility='hidden'
extDV5.style.visibility='hidden'

function cDV1 () {
    while (DV1.hasChildNodes()) {DV1.removeChild(DV1.firstChild);}
	while (DV2.hasChildNodes()) {DV2.removeChild(DV2.firstChild);}
	while (DV3.hasChildNodes()) {DV3.removeChild(DV3.firstChild);}
	while (DV4.hasChildNodes()) {DV4.removeChild(DV4.firstChild);}
	while (DV5.hasChildNodes()) {DV5.removeChild(DV5.firstChild);}
	while (DV6.hasChildNodes()) {DV6.removeChild(DV6.firstChild);}
	extDV1.style.visibility='visible'
	extDV2.style.visibility='hidden'
	extDV3.style.visibility='hidden'
	extDV4.style.visibility='hidden'
	extDV5.style.visibility='hidden'

    const uniqueMakes = [];
    const unique = myData.filter(item => {
        if(uniqueMakes.includes(item.Make)){
            return false;
        }else{
            uniqueMakes.push(item.Make);
            return true;
        }
    });

    for (i = 0; i < uniqueMakes.length; i++) {
		newItemDV1 = document.createElement('a');
		newItemDV1.innerHTML = uniqueMakes[i];
		DV1.appendChild(newItemDV1);
	};

    DV1.style.backgroundColor = "#eee"
}

function cDV2 (event) {
    while (DV2.hasChildNodes()) {DV2.removeChild(DV2.firstChild);}
	while (DV3.hasChildNodes()) {DV3.removeChild(DV3.firstChild);}
	while (DV4.hasChildNodes()) {DV4.removeChild(DV4.firstChild);}
	while (DV5.hasChildNodes()) {DV5.removeChild(DV5.firstChild);}
	while (DV6.hasChildNodes()) {DV6.removeChild(DV6.firstChild);}
	extDV2.style.visibility='visible'
	extDV3.style.visibility='hidden'
	extDV4.style.visibility='hidden'
	extDV5.style.visibility='hidden'

	DV1selection = event.target.innerHTML;

	const activeIt = DV1.querySelectorAll("a.active");
	activeIt.forEach(function(item) {item.classList.remove('active');})
	event.target.className += " active";

    const uniqueSeries = [];
    const unique = myData.filter(item => {
        if(item.Make === DV1selection) {
            if(uniqueSeries.includes(item.Series)){
                return false;
            }else{
                uniqueSeries.push(item.Series);
                return true;
            }
        }
    });

    for (i = 0; i < uniqueSeries.length; i++) {
		newItemDV2 = document.createElement('a');
		newItemDV2.innerHTML = uniqueSeries[i];
		DV2.appendChild(newItemDV2);
	};

	DV2.style.backgroundColor = "#eee"
}

function cDV3 (event) {
    while (DV3.hasChildNodes()) {DV3.removeChild(DV3.firstChild);}
	while (DV4.hasChildNodes()) {DV4.removeChild(DV4.firstChild);}
	while (DV5.hasChildNodes()) {DV5.removeChild(DV5.firstChild);}
	while (DV6.hasChildNodes()) {DV6.removeChild(DV6.firstChild);}
	extDV3.style.visibility='visible'
	extDV4.style.visibility='hidden'
	extDV5.style.visibility='hidden'

	DV2selection = event.target.innerHTML;

	const activeIt = DV2.querySelectorAll("a.active");
	activeIt.forEach(function(item) {item.classList.remove('active');})
	event.target.className += " active";

    const uniqueModels = [];
    const unique = myData.filter(item => {
        if(item.Series === DV2selection) {
            if(uniqueModels.includes(item.Model)){
                return false;
            }else{
                uniqueModels.push(item.Model);
                return true;
            }
        }
    });

    for (i = 0; i < uniqueModels.length; i++) {
		newItemDV3 = document.createElement('a');
		newItemDV3.innerHTML = uniqueModels[i];
		DV3.appendChild(newItemDV3);
	};

	DV3.style.backgroundColor = "#eee"
}

function cDV4 (event) {
    while (DV4.hasChildNodes()) {DV4.removeChild(DV4.firstChild);}
	while (DV5.hasChildNodes()) {DV5.removeChild(DV5.firstChild);}
	while (DV6.hasChildNodes()) {DV6.removeChild(DV6.firstChild);}
	extDV4.style.visibility='visible'
	extDV5.style.visibility='hidden'

	DV3selection = event.target.innerHTML;

	const activeIt = DV3.querySelectorAll("a.active");
	activeIt.forEach(function(item) {item.classList.remove('active');})
	event.target.className += " active";

    const uniqueTypes = [];
    const unique = myData.filter(item => {
        if(item.Model === DV3selection) {
            if(uniqueTypes.includes(item.Type)){
                return false;
            }else{
                uniqueTypes.push(item.Type);
                return true;
            }
        }
    });

    for (i = 0; i < uniqueTypes.length; i++) {
		newItemDV4 = document.createElement('a');
		newItemDV4.innerHTML = uniqueTypes[i];
		DV4.appendChild(newItemDV4);
	};

	DV4.style.backgroundColor = "#eee"
}

function cDV5 (event) {
    while (DV5.hasChildNodes()) {DV5.removeChild(DV5.firstChild);}
	while (DV6.hasChildNodes()) {DV6.removeChild(DV6.firstChild);}
	extDV5.style.visibility='visible'

	DV4selection = event.target.innerHTML;

	const activeIt = DV4.querySelectorAll("a.active");
	activeIt.forEach(function(item) {item.classList.remove('active');})
	event.target.className += " active";

    const uniqueYears = [];
    const unique = myData.filter(item => {
        if(item.Type === DV4selection) {
            if(uniqueYears.includes(item.Year)){
                return false;
            }else{
                uniqueYears.push(item.Year);
                return true;
            }
        }
    });

    for (i = 0; i < uniqueYears.length; i++) {
		newItemDV5 = document.createElement('a');
		newItemDV5.innerHTML = uniqueYears[i];
		DV5.appendChild(newItemDV5);
	};

	DV5.style.backgroundColor = "#eee"
}

function tiene_repetidos(array){
    return new Set(array).size!==array.length
}

function printResp () {
	while (DV6.hasChildNodes()) {DV6.removeChild(DV6.firstChild);}

	var target = event.target.innerHTML;
	event.target.className += " active";
	DV5selection = target;

	veicSelecionado = document.createElement('li');
	veicSelecionado.innerHTML = ('SELECTED VEHICLE:');
	DV6.appendChild(veicSelecionado);

    var myArr = [];
    var valueToPush = { };
    for (i = 0; i < myData.length; i++) {

        if (myData[i].Series === DV2selection ) {

            if ( parseInt(myData[i].Series) >0 ) {

                veicSelecionado = document.createElement('li');
                veicSelecionado.innerHTML = ('Make: ' + myData[i].Series);
                DV6.appendChild(veicSelecionado);
            }
        }
	};
}