$(document).ready(function() {
   $(".btn").click(function(event) {
    // Removes focus of the button.
    $(this).blur();
  });
  
  var codepen_id = Object.freeze({
    "TITLE": 0,
    "PEN_ID": 1
  });
  
  var codepen_projects = {
    "basic": [
      ["Tribute", "KVYBWj"]
    ],
    "intermediate": [
      ["Random Quote Machine", "qbpqBa"],
      ["Local Weather", "zrQNvY"],
      ["Wikipedia Viewer", "JXPpqm"],
      ["TwitchTV JSON API", "QNwvVW"]
    ],
    "advanced": [
      ["JavaScript Calculator", "jWYQvB"],
      ["Pomodoro Clock", "jWxyNd"],
      ["Tic Tac Toe Game", "qZOVNX"],
      ["Simon Game", "pyNjdK"]
    ],
    "react": [
      ["Markdown Previewer", "RamaQM"],
      ["Camper Leaderboard", "GqgNNK"],
      ["Recepe Box", "YWyqgg"],
      ["The Game of Life", "XKdvqO"],
      ["Roguelike Dungeon Crawler Game", "Wxqjaw"]
    ],
    "datavisualization": [
      ["Visualize Data with a Bar Chart", "GjmrXE"],
      ["Visualize Data with a Scatterplot Graph", "bwRzLW"],
      ["Visualize Data with a Heat Map", "xEXLNX"],
      ["Show Relationship with a Force Directed Graph", "pEdXJw"],
      ["Map Data Across the Globe", "wzjKgb"]
    ]
  };
  
  function createProjectItem(site_title, link_site, iframe_site, github_site) {
    var project = $("<div class=\"single-project\"></div>");
    var iframe = $("<div class=\"project-iframe\"></div>");
    var overlay = $("<div class=\"site-overlay\"></div>");
    var data = $("<div class=\"project-data\"></div>");
    var title = $("<h4 class=\"project-title\"></h4>");
    if (link_site != "") {
      var link = $("<a href=\"" + link_site + "\" target=\"_blank\" class=\"project-link\"></a>");
      var site = $("<iframe title=\"" + site_title + "\" src=\"" + iframe_site + "\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\"></iframe>");
      iframe.append(link);
      iframe.append(site);
      if (github_site != "") {
        var github_title = $("<h4 class=\"project-title\"></h4>");
        github_title.html("<a href=\"" + github_site + "\" target=\"_blank\">GitHub</a>");
        data.append(github_title);
      }
      title.html("<a href=\"" + link_site + "\" target=\"_blank\">" + site_title + "</a>");
    } else {
      title.html(site_title);
    }
    data.prepend(title);
    iframe.append(overlay);
    project.append(iframe);
    project.append(data);
    return project;
  }
  
  function createPenGrid(key) {
    var grid = $("<div class=\"project-grid\"></div>");
    for (var item in codepen_projects[key]) {
      var project_item = codepen_projects[key][item];
      var link_site = "";
      var iframe_site = "";
      if (project_item[codepen_id.PEN_ID] != "") {
        link_site = "https://codepen.io/ellacodecamp/pen/" + project_item[codepen_id.PEN_ID];
        iframe_site = "https://s.codepen.io/ellacodecamp/fullcpgrid/" + project_item[codepen_id.PEN_ID];
      }
      var project = createProjectItem(project_item[codepen_id.TITLE], link_site, iframe_site, "");
      grid.append(project);
    }
    $("#" + key).after(grid);
  }
  
  for (var key in codepen_projects) {
    if (codepen_projects.hasOwnProperty(key)) {
      createPenGrid(key);
    }
  }

  var cloud9_id = Object.freeze({
    "TITLE": 0,
    "NAME": 1,
    "HEROKU_PATH": 2
  });

  var cloud9_projects = {
    "api": [
      ["Timestamp Microservice", "timestamp", ""],
      ["Request Header Parser Microservice", "header-parser", "api/whoami"],
      ["URL Shortener Microservice", "url-shortener", ""],
      ["Image Search Abstraction Layer", "image-search", "api/latest/imagesearch/"],
      ["File Metadata Microservice", "file-metadata", ""],
    ],
    "dynamicweb": [
      ["Voting App", "", ""],
      ["Nightlife Coordination App", "", ""],
      ["Chart the Stock Market", "", ""],
      ["Manage a Book Trading Club", "", ""],
      ["Pinterest Clone", "", ""]
    ]
  };

  function createCloud9Grid(key) {
    var grid = $("<div class=\"project-grid\"></div>");
    for (var item in cloud9_projects[key]) {
      var project_item = cloud9_projects[key][item];
      var link_site = "";
      var github_site = "";
      if (project_item[cloud9_id.NAME] != "") {
        link_site = "https://" + project_item[cloud9_id.NAME] + "-ellacodecamp.herokuapp.com/";
        if (project_item[cloud9_id.HEROKU_PATH]) {
          link_site += project_item[cloud9_id.HEROKU_PATH];
        }
        github_site = "https://github.com/ellacodecamp/" + project_item[cloud9_id.NAME];
      }
      var project = createProjectItem(
                      project_item[cloud9_id.TITLE],
                      link_site,
                      link_site,
                      github_site);
      grid.append(project);
    }
    $("#" + key).after(grid);
  }
  
  for (var key in cloud9_projects) {
    if (cloud9_projects.hasOwnProperty(key)) {
      createCloud9Grid(key);
    }
  }
});