var active = {
  "mostActiveStock" : [ {
    "ticker" : "CABO",
    "changes" : 9.62,
    "price" : "1260.65",
    "changesPercentage" : "(+0.77%)",
    "companyName" : "Cable One Inc."
  }, {
    "ticker" : "NVR",
    "changes" : -5.21,
    "price" : "3497.8",
    "changesPercentage" : "(-0.15%)",
    "companyName" : "NVR Inc."
  }, {
    "ticker" : "MKL",
    "changes" : 3.29,
    "price" : "1151.89",
    "changesPercentage" : "(+0.29%)",
    "companyName" : "Markel Corporation"
  }, {
    "ticker" : "IYH",
    "changes" : 2.59,
    "price" : "191.28",
    "changesPercentage" : "(+1.37%)",
    "companyName" : "iShares U.S. Healthcare"
  }, {
    "ticker" : "GOOG",
    "changes" : -2.58,
    "price" : "1177.32",
    "changesPercentage" : "(-0.22%)",
    "companyName" : "Alphabet Inc."
  }, {
    "ticker" : "AMZN",
    "changes" : -2.45,
    "price" : "1793.14",
    "changesPercentage" : "(-0.14%)",
    "companyName" : "Amazon.com Inc."
  }, {
    "ticker" : "BKNG",
    "changes" : 2.39,
    "price" : "1924.08",
    "changesPercentage" : "(+0.12%)",
    "companyName" : "Booking Holdings Inc."
  }, {
    "ticker" : "INDL",
    "changes" : 2.36,
    "price" : "55.68",
    "changesPercentage" : "(+4.43%)",
    "companyName" : "Direxion Daily MSCI India Bull 3x Shares"
  }, {
    "ticker" : "OVBC",
    "changes" : -2.34,
    "price" : "32.37",
    "changesPercentage" : "(-6.74%)",
    "companyName" : "Ohio Valley Banc Corp."
  }, {
    "ticker" : "MELI",
    "changes" : -2.12,
    "price" : "625.41",
    "changesPercentage" : "(-0.34%)",
    "companyName" : "MercadoLibre Inc."
  } ]
}

var losers = {
  "mostLoserStock" : [ {
    "ticker" : "NVR",
    "changes" : -5.21,
    "price" : "3497.8",
    "changesPercentage" : "(-0.15%)",
    "companyName" : "NVR Inc."
  }, {
    "ticker" : "GOOG",
    "changes" : -2.58,
    "price" : "1177.32",
    "changesPercentage" : "(-0.22%)",
    "companyName" : "Alphabet Inc."
  }, {
    "ticker" : "AMZN",
    "changes" : -2.45,
    "price" : "1793.14",
    "changesPercentage" : "(-0.14%)",
    "companyName" : "Amazon.com Inc."
  }, {
    "ticker" : "OVBC",
    "changes" : -2.34,
    "price" : "32.37",
    "changesPercentage" : "(-6.74%)",
    "companyName" : "Ohio Valley Banc Corp."
  }, {
    "ticker" : "MELI",
    "changes" : -2.12,
    "price" : "625.41",
    "changesPercentage" : "(-0.34%)",
    "companyName" : "MercadoLibre Inc."
  }, {
    "ticker" : "GOOGL",
    "changes" : -2.05,
    "price" : "1179.29",
    "changesPercentage" : "(-0.17%)",
    "companyName" : "Alphabet Inc."
  }, {
    "ticker" : "DRIP",
    "changes" : -1.79,
    "price" : "107.04",
    "changesPercentage" : "(-1.64%)",
    "companyName" : "Direxion Daily S&P Oil & Gas Exp. & Prod. Bear 3X Shares"
  }, {
    "ticker" : "Y",
    "changes" : -1.74,
    "price" : "752.11",
    "changesPercentage" : "(-0.23%)",
    "companyName" : "Alleghany Corporation"
  }, {
    "ticker" : "GLOB",
    "changes" : -1.72,
    "price" : "98.58",
    "changesPercentage" : "(-1.72%)",
    "companyName" : "Globant S.A."
  }, {
    "ticker" : "WTM",
    "changes" : -1.6,
    "price" : "1076.4",
    "changesPercentage" : "(-0.15%)",
    "companyName" : "White Mountains Insurance Group Ltd."
  } ]
}

var gainer = {
  "mostGainerStock" : [ {
    "ticker" : "URE",
    "changes" : 5.28,
    "price" : "82.59",
    "changesPercentage" : "(+6.83%)",
    "companyName" : "ProShares Ultra Real Estate"
  }, {
    "ticker" : "CABO",
    "changes" : 3.74,
    "price" : "1258.75",
    "changesPercentage" : "(+0.30%)",
    "companyName" : "Cable One Inc."
  }, {
    "ticker" : "JNUG",
    "changes" : 2.75,
    "price" : "83.96",
    "changesPercentage" : "(+3.39%)",
    "companyName" : "Direxion Daily Junior Gold Miners Index Bull 3X Shares"
  }, {
    "ticker" : "XSD",
    "changes" : 2.36,
    "price" : "89.5",
    "changesPercentage" : "(+2.71%)",
    "companyName" : "SPDR S&P Semiconductor"
  }, {
    "ticker" : "MGK",
    "changes" : 1.92,
    "price" : "131.35",
    "changesPercentage" : "(+1.48%)",
    "companyName" : "Vanguard Mega Cap Growth"
  }, {
    "ticker" : "NTES",
    "changes" : 1.55,
    "price" : "260.18",
    "changesPercentage" : "(+0.60%)",
    "companyName" : "NetEase Inc."
  }, {
    "ticker" : "CHE",
    "changes" : 1.36,
    "price" : "428.51",
    "changesPercentage" : "(+0.32%)",
    "companyName" : "Chemed Corp"
  }, {
    "ticker" : "WTM",
    "changes" : 1.31,
    "price" : "1094.99",
    "changesPercentage" : "(+0.12%)",
    "companyName" : "White Mountains Insurance Group Ltd."
  }, {
    "ticker" : "Y",
    "changes" : 1.29,
    "price" : "755.33",
    "changesPercentage" : "(+0.17%)",
    "companyName" : "Alleghany Corporation"
  }, {
    "ticker" : "MKL",
    "changes" : 1.24,
    "price" : "1151.34",
    "changesPercentage" : "(+0.11%)",
    "companyName" : "Markel Corporation"
  } ]
};

for (i = 0; i < active.mostActiveStock.length - 5; i++){
  $('#name').append($('<div class = "juice"><label>' + active.mostActiveStock[i].ticker+ '</label></div>'));
  $('#name').append($('<div class = "cranberry"><label>' + active.mostActiveStock[i].companyName+ '</label></div>'));
  $('#price').append($('<div class = "hi"><label>' + active.mostActiveStock[i].price + '</label></div>'));
  $('#price').append($('<div class = "hi"><label>' + "&emsp;"+'</label></div>'));
  $('#text').append($('<div class = "hi"><label>' + active.mostActiveStock[i].changes+ '</label></div>'));
  $('#text').append($('<div class = "hi"><label>' + active.mostActiveStock[i].changesPercentage+ '</label></div>'));
  $('#table').append($('<div class= "col-xs-6 col-xm-6"></div>'));
  $('#table').append($('<div class= "col-xs-2 col-xm-2"></div>'));
  $('#table').append($('<div class= "col-xs-4 col-xm-4"></div>'));
  document.getElementsByClassName('juice')[i].style.padding = "0px";
  document.getElementsByClassName('juice')[i].style.margins = "0px";
  document.getElementsByClassName('juice')[i].style.fontSize = "20px";
  document.getElementsByClassName('cranberry')[i].style.padding = "0px";
  document.getElementsByClassName('cranberry')[i].style.margins = "0px";
  document.getElementsByClassName('cranberry')[i].style.fontSize = "9px";
}


function gainers() {
  myDelete();
  for (i = 0; i < gainer.mostGainerStock.length - 5; i++){
    $('#name').append($('<div class = "juice"><label>' + gainer.mostGainerStock[i].ticker+ '</label></div>'));
    $('#name').append($('<div class = "cranberry"><label>' + gainer.mostGainerStock[i].companyName+ '</label></div>'));
    $('#price').append($('<div class = "cranberry"><label>' + gainer.mostGainerStock[i].price + '</label></div>'));
    $('#price').append($('<div class = "hi"><label>' + "&emsp;"+'</label></div>'));
    $('#text').append($('<div class = "hi"><label>' + gainer.mostGainerStock[i].changes+ '</label></div>'));
    $('#text').append($('<div class = "hi"><label>' + gainer.mostGainerStock[i].changesPercentage+ '</label></div>'));
    $('#row').append($('<div class= "col-xs-6 col-xm-6"></div>'));
    $('#row').append($('<div class= "col-xs-2 col-xm-2"></div>'));
    $('#row').append($('<div class= "col-xs-4 col-xm-4"></div>'));
    document.getElementsByClassName('juice')[i].style.padding = "0px";
    document.getElementsByClassName('juice')[i].style.margins = "0px";
    document.getElementsByClassName('juice')[i].style.fontSize = "20px";
    document.getElementsByClassName('cranberry')[i].style.padding = "0px";
    document.getElementsByClassName('cranberry')[i].style.margins = "0px";
    document.getElementsByClassName('cranberry')[i].style.fontSize = "9px";
  }
}

function loser(){
  myDelete();
  for (i = 0; i < losers.mostLoserStock.length - 5; i++){
    $('#name').append($('<div class = "juice"><label>' + losers.mostLoserStock[i].ticker+ '</label></div>'));
    $('#name').append($('<div class = "cranberry"><label>' + losers.mostLoserStock[i].companyName+ '</label></div>'));
    $('#price').append($('<div class = "cranberry"><label>' + losers.mostLoserStock[i].price + '</label></div>'));
    $('#price').append($('<div class = "hi"><label>' + "&emsp;"+'</label></div>'));
    $('#text').append($('<div class = "hi"><label>' + losers.mostLoserStock[i].changes+ '</label></div>'));
    $('#text').append($('<div class = "hi"><label>' + losers.mostLoserStock[i].changesPercentage+ '</label></div>'));
    $('#row').append($('<div class= "col-xs-6 col-xm-6"></div>'));
    $('#row').append($('<div class= "col-xs-2 col-xm-2"></div>'));
    $('#row').append($('<div class= "col-xs-4 col-xm-4"></div>'));
    document.getElementsByClassName('juice')[i].style.padding = "0px";
    document.getElementsByClassName('juice')[i].style.margins = "0px";
    document.getElementsByClassName('juice')[i].style.fontSize = "20px";
    document.getElementsByClassName('cranberry')[i].style.padding = "0px";
    document.getElementsByClassName('cranberry')[i].style.margins = "0px";
    document.getElementsByClassName('cranberry')[i].style.fontSize = "9px";
  }
}

function weird(){
  myDelete();
  for (i = 0; i < active.mostActiveStock.length - 5; i++){
    $('#name').append($('<td><div class = "juice"><label>' + active.mostActiveStock[i].ticker  + '</label></div></td>'));
    $('#name').append($('<td><div class = "cranberry"><label>' + active.mostActiveStock[i].companyName+ '</label></div></td>'));
    $('#price').append($('<td><div class = "hi"><label>' + active.mostActiveStock[i].price + '</label></div></td>'));
    $('#price').append($('<td><div class = "hi"><label>' + "&emsp;"+'</label></div></td>'));
    $('#text').append($('<td><div class = "hi"><label>' + active.mostActiveStock[i].changes+ '</label></div></td>'));
    $('#text').append($('<td><div class = "hi"><label>' + active.mostActiveStock[i].changesPercentage+ '</label></div></td>'));
    $('#row').append($('<td><div class= "col-xs-6 col-xm-6"></div></td>'));
    $('#row').append($('<td><div class= "col-xs-2 col-xm-2"></div></td>'));
    $('#row').append($('<td><div class= "col-xs-4 col-xm-4"></div></td>'));
    document.getElementsByClassName('juice')[i].style.padding = "0px";
    document.getElementsByClassName('juice')[i].style.margins = "0px";
    document.getElementsByClassName('juice')[i].style.fontSize = "20px";
    document.getElementsByClassName('cranberry')[i].style.padding = "0px";
    document.getElementsByClassName('cranberry')[i].style.margins = "0px";
    document.getElementsByClassName('cranberry')[i].style.fontSize = "9px";
  }
}
function myDelete(){
  $( ".juice" ).remove();
  $( ".cranberry" ).remove();
  $( ".hi" ).remove();
}

document.getElementById("gainers").onclick = gainers;
document.getElementById("active").onclick = weird;
document.getElementById("losers").onclick = loser;