/**
 * This file just stores one big JS object that serves as the content.
 */


/**
 * Build the ul element for the contributor list.
 * @param {list{string}} peopleList The list of names of contributors.
 * @return {Element} The fully populated ul element.
 */
buildContributorList = function(peopleList) {
  var contributorList = document.createElement('ul');
  contributorList.id = 'project-contributor-list';

  for (var person in peopleList) {
    var projectContributorElement = document.createElement('li');
    projectContributorElement.className = 'project-contributor';
    projectContributorElement.innerHTML = peopleList[person];
    contributorList.appendChild(projectContributorElement);
  }
  return contributorList;
};


/**
 * Create the div housing all the links for the project.
 * @param {Object} linkTypes Array mapping link type to list of links.
 * @return {Element} A populated div element with all the links.
 */
buildLinksDiv = function(linkTypes) {
  var linksDiv = document.createElement('div');
  linksDiv.setAttribute('class', 'project-links');
  //class=project-links-header
  var projectLinksHeaderSpan = document.createElement('span');
  projectLinksHeaderSpan.className = 'header-span';
  projectLinksHeaderSpan.innerHTML = 'Links';
  linksDiv.appendChild(projectLinksHeaderSpan);
  
  for (var linkType in linkTypes) {
    var linkSpan = document.createElement('span');
    var linkList = linkTypes[linkType];
    if (linkList.length > 0) {
      linkSpan.innerHTML = '<span>&nbsp;&nbsp;' + linkType + ':&nbsp;</span>';
      linkSpan.className = 'link-span';
      linksDiv.appendChild(document.createElement('br'));
      var linkList = linkTypes[linkType];
      for (var target in linkList) {
        var linkElement = document.createElement('a');
        linkElement.className = 'project-link';
        linkElement.setAttribute('href', linkList[target].href);
        linkElement.innerHTML = linkList[target].text;
        linkSpan.appendChild(linkElement);
        linkSpan.appendChild(linkElement);
      }
      linksDiv.appendChild(linkSpan);
    }
    //linksDiv.appendChild(document.createElement('br'));
  }
  return linksDiv;
};


/**
 * Build the main three column div for the project.
 * @param {Object} projectData The 'data' portion form the PROJECTS list below.
 * @return {Element} Fully populate div.
 */
buildMainProjectDiv = function(projectData) {
  //This div has two children divs.
  //The mainBodyDiv on the right.
  //This has a single child which is a container div.
  var mainBodyDiv = document.createElement('div');
  mainBodyDiv.setAttribute('id', 'yui-main');
  //The secondaryBodyDiv representing the leftmost column of the three.
  var secondaryBodyDiv = document.createElement('div');
  secondaryBodyDiv.setAttribute('class', 'yui-b');

  //This is the container child div in mainBodyDiv.
  //It has a single container div as a child.
  var mainBodyDivContainer = document.createElement('div');
  mainBodyDivContainer.setAttribute('class', 'yui-b');
  
  //This div contains two children divs, the middle and rightmost columns.
  var mainBodyDivSubContainer = document.createElement('div');
  mainBodyDivSubContainer.setAttribute('class', 'yui-g');
  
  //This div represents the middle column of the main body.
  //It holds the project narrative.
  var projectNarrativeDiv = document.createElement('div');
  projectNarrativeDiv.className = 'yui-u first';
  projectNarrativeDiv.id = 'project-narrative';
  
  //The heading for the narrative: 'Project Description'.
  var projectNarrativeHeaderSpan = document.createElement('span');
  projectNarrativeHeaderSpan.className = 'header-span';
  projectNarrativeHeaderSpan.textContent = 'Project Description';
  
  //The actual narrative.
  var projectNarrativeSpan = document.createElement('span');
  projectNarrativeSpan.className = 'project-narrative';
  projectNarrativeSpan.innerHTML = projectData['narrative'];

  //Add the narrative to it's appropriate div.
  projectNarrativeDiv.appendChild(projectNarrativeHeaderSpan);
  projectNarrativeDiv.appendChild(document.createElement('br'));
  projectNarrativeDiv.appendChild(projectNarrativeSpan);

  //The rightmost column.
  var projectContributorDiv = document.createElement('div');
  projectContributorDiv.className = 'yui-u';
  projectContributorDiv.id = 'project-contributors';

  //class=project-contributors-header
  var projectContributorsHeaderSpan = document.createElement('span');
  projectContributorsHeaderSpan.className = 'header-span';
  projectContributorsHeaderSpan.textContent = 'Contributors';

  //class=project-contributors-list type=ul
  var projectContributorsList = buildContributorList(projectData['people']);
  projectContributorDiv.appendChild(projectContributorsHeaderSpan);
  projectContributorDiv.appendChild(document.createElement('br'));
  projectContributorDiv.appendChild(projectContributorsList);
  
  mainBodyDivSubContainer.appendChild(projectNarrativeDiv);
  mainBodyDivSubContainer.appendChild(projectContributorDiv);
  mainBodyDivContainer.appendChild(mainBodyDivSubContainer);
  mainBodyDiv.appendChild(mainBodyDivContainer);
  
  var projectThumbnailDiv = document.createElement('div');
  projectThumbnailDiv.className = 'tab-content-image';
  
  //class=project-thumbnail-header
  var projectThumbnailHeaderSpan = document.createElement('span');
  projectThumbnailHeaderSpan.className = 'header-span';
  projectThumbnailHeaderSpan.textContent = '';
  
  //class=project-thumbnail type=image
  var projectThumbnailImage = document.createElement('img');
  projectThumbnailImage.className = 'project-thumbnail';
  projectThumbnailImage.src = projectData['image'];
  projectThumbnailDiv.appendChild(projectThumbnailHeaderSpan);
  projectThumbnailDiv.appendChild(projectThumbnailImage);
  secondaryBodyDiv.appendChild(projectThumbnailDiv);
  
  //The final returned body div.
  var bodyDiv = document.createElement('div');
  bodyDiv.appendChild(mainBodyDiv);
  bodyDiv.appendChild(secondaryBodyDiv);
  return bodyDiv;
};


/**
 * Build the div structure for one project.
 * @param {Object} project One element in the PROJECTS list below.
 * @return {Element} The populated div element for the project.
 */
buildProjectDiv = function(project) {
  /**
   * Each Tab's <div> will be a child of this.
   * <div id='project-id' class='tab-main'></div>
   */
  var tabMainDiv = document.createElement('div');
  tabMainDiv.setAttribute('id', project['projectName']);
  tabMainDiv.setAttribute('class', 'tab-main');

  //id=doc2 class=yui-t3
  var tabChildDiv = document.createElement('div');
  tabChildDiv.setAttribute('id', 'doc2');
  tabChildDiv.setAttribute('class', 'yui-t3');

  //id=hd
  var tabChildHeaderDiv = document.createElement('div');
  tabChildHeaderDiv.setAttribute('id', 'hd');

  //id=ft
  var tabChildFooterDiv = document.createElement('div');
  tabChildFooterDiv.setAttribute('id', 'ft');
  
  //id=bd
  var tabChildBodyDiv = buildMainProjectDiv(project.data);
  tabChildBodyDiv.setAttribute('id', 'bd');
  
  //class=project-heading
  var projectHeaderDiv = document.createElement('div');
  projectHeaderDiv.id = 'project-heading';
  projectHeaderDiv.innerHTML = project['data']['title'];
  tabChildHeaderDiv.appendChild(projectHeaderDiv);
  
  var projectLinksDiv = buildLinksDiv(project['data']['links']);
  tabChildFooterDiv.appendChild(projectLinksDiv);

  tabChildDiv.appendChild(tabChildHeaderDiv);
  tabChildDiv.appendChild(tabChildBodyDiv);
  tabChildDiv.appendChild(tabChildFooterDiv);
  tabMainDiv.appendChild(tabChildDiv);
  return tabMainDiv;
};


/**
 * Build a tab title li element.
 * @param {string} name The short name of the project that appears in the tab.
 * @return {Element} An li element that contains a link to the project div.
 */
buildTabTitle = function(name) {
  var projectTabTitle = document.createElement('li');
  var projectLink = document.createElement('a');
  projectLink.href = '#' + name;
  projectLink.textContent = name;
  projectTabTitle.appendChild(projectLink);
  return projectTabTitle;
};


buildProjectTabs = function(tabDivId, projectList) {
  var tabDiv = document.getElementById(tabDivId);

//Create the <ul> element to store the tab titles.
  var tabMenuList = document.createElement('ul');

  for (var project in projectList) {
    tabMenuList.appendChild(buildTabTitle(projectList[project]['projectName']));

    //Append one project tab <div> element to the container for each project.
    tabDiv.appendChild(buildProjectDiv(projectList[project]));
  };

  //The menu goes before the actual project tabs.
  tabDiv.insertBefore(tabMenuList, tabDiv.firstChild);
};