"use strict";
// this example is part of a blog post:
// https://www.lars-berning.de/modernizing-legacy-web-frontends-adding-templates-part-1

// for demo purposes the data is embedded, usually this would be the result of an ajax fetch or similar
var heroData = [
  { name: "Superman", secretIdentity: "Clark Kent", firstAppearance: "1932", image: "https://upload.wikimedia.org/wikipedia/en/thumb/e/eb/SupermanRoss.png/250px-SupermanRoss.png"},
  { name: "Batman", secretIdentity: "Bruce Wayne", firstAppearance: "1939", image: "https://upload.wikimedia.org/wikipedia/en/thumb/7/74/Batman_Detective_Comics_Vol_2_1.png/250px-Batman_Detective_Comics_Vol_2_1.png"},
  { name: "Flash", secretIdentity: "Barry Allen", firstAppearance: "1956", image: "https://upload.wikimedia.org/wikipedia/en/thumb/b/b7/Flash_v1_105.jpg/250px-Flash_v1_105.jpg"},
  { name: "Green Lantern", secretIdentity: "Hal Jordan", firstAppearance: "1959", image: "https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Green_Lantern_Rebirth_6.jpg/220px-Green_Lantern_Rebirth_6.jpg"},
  { name: "Hulk", secretIdentity: "Robert Bruce Banner", firstAppearance: "1962", image: "https://upload.wikimedia.org/wikipedia/en/5/59/Hulk_%28comics_character%29.png"},
  { name: "Spider-Man", secretIdentity: "Peter Parker", firstAppearance: "1962", image: "https://upload.wikimedia.org/wikipedia/en/thumb/2/21/Web_of_Spider-Man_Vol_1_129-1.png/250px-Web_of_Spider-Man_Vol_1_129-1.png"},
  { name: "Iron Man", secretIdentity: "Tony Stark", firstAppearance: "1963", image: "https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/Iron_Man_bleeding_edge.jpg/220px-Iron_Man_bleeding_edge.jpg"},
  { name: "Wolverine", secretIdentity: "James Howlett", firstAppearance: "1974", image: "https://upload.wikimedia.org/wikipedia/en/c/c8/Marvelwolverine.jpg"}
]

// bootstrap web frontend
function init(){
  renderHeroes();
}

// renders the list of superheroes
function renderHeroes() {
  var heroList = $("#heroList");
  var table = $("<table />").addClass("u-full-width");
  table.append($("<thead><tr><th>Name</th><th>Secret Identity</th><th>Details</th></tr></thead>"));
  var tableBody = $("<tbody />");
  for (var index = 0; index < heroData.length; index++){
    tableBody.append(buildHero(heroData[index], index));
  }

  table.append(tableBody);
  heroList.append(table);
};

// used by function renderHeroes to create the jQuery representation of a superhero
function buildHero(item, index) {
  var tableRow = $("<tr />");
  var nameElem = $("<td />").html(item.name);
  var secretIdentityElem = $("<td />").html(item.secretIdentity);
  var detailLink = $("<a />").attr("href", "#").html("Show Details").click({index: index}, showDetail);
  var showDetailElem = $("<td />").append(detailLink);

  tableRow.append(nameElem).append(secretIdentityElem).append(showDetailElem);
  return tableRow;
};

// renders the detail view of a hero, event contains the index of the selected hero
function showDetail(event) {
  event.preventDefault();
  var hero = heroData[event.data.index];
  var detail = $("#heroDetail");
  detail.empty();

  // get the template as string (defined in html file)
  var heroDetailTemplate = $('#heroDetailTemplate').html();
  // use lodash to compile the template
  var compiledHeroDetailTemplate = _.template(heroDetailTemplate);
  // render the template with the data of a hero and attach it to the DOM
  detail.append(compiledHeroDetailTemplate({hero: hero}));
  // since the template is a plain string we have to add the click listener afterwards
  detail.find(".jsShowAllHeroesButton").click(showHeroes);

  $("#heroList").hide();
  detail.show();
};

function showHeroes(event) {
  event.preventDefault();
  $("#heroDetail").hide();
  $("#heroList").show();
};

// call the init function when the page is loaded
$( init );