/**
 * @file Page rendering module.
 */

/* jshint strict: false, browser: true, globalstrict: true */
/* global require, module */

'use strict';
var d3 = require('d3');
var flame_chart = require('./flame_chart.js');
var memory_stats = require('./memory_stats.js');
var code_heatmap = require('./code_heatmap.js');

var JSON_URI = 'profile';

/**
 * Creates empty hidden div with specified ID.
 * @param {string} content_id - div ID.
 */
function createHiddenTabContent_(id) {
  return d3.select('body')
    .append('div')
    .attr('class', 'tab-content')
    .attr('id', id)
    .attr('style', 'display: none');
}

/**
 *  Creates flame chart tab header with specified status and
 *  appends it to the parent node.
 *  @param {Object} parent - Parent element to append tab to.
 *  @param {status} status - Specified tab status.
 */
function createFlameChartTab_(parent, status) {
  parent.append('li')
    .attr('class', status)
    .text('Flame chart')
    .on('click', function(d) {
      d3.selectAll('li')
        .attr('class', 'not-selected');
      d3.select(this)
        .attr('class', 'selected');
      showTab_('flame-chart');
    });
}

/**
 *  Creates memory stats tab header with specified status and
 *  appends it to the parent node.
 *  @param {Object} parent - Parent element to append tab to.
 *  @param {status} status - Specified tab status.
 */
function createMemoryChartTab_(parent, status) {
  parent.append('li')
    .attr('class', status)
    .text('Memory stats')
    .on('click', function(d) {
      d3.selectAll('li')
        .attr('class', 'not-selected');
      d3.select(this)
        .attr('class', 'selected');
      showTab_('memory-chart');
    });
}

/**
 *  Creates code heatmap tab header with specified status and
 *  appends it to the parent node.
 *  @param {Object} parent - Parent element to append tab to.
 *  @param {status} status - Specified tab status.
 */
function createCodeHeatmapTab_(parent, status) {
  parent.append('li')
    .attr('class', status)
    .text('Code heatmap')
    .on('click', function(d) {
      d3.selectAll('li')
        .attr('class', 'not-selected');
      d3.select(this)
        .attr('class', 'selected');
      showTab_('code-heatmap');
    });
}

/**
 * Renders stats page.
 * @param {Object} data - Data for page rendering.
 */
function renderPage(data) {
  var tabHeader = d3.select('body')
    .append('ul')
    .attr('class', 'tab-header');

  var props = Object.keys(data);
  for (var i = 0; i < props.length; i++) {
    var status = (i === 0) ? 'selected' : 'not-selected';
    var display = (i === 0) ? 'block' : 'none';
    switch (props[i]) {
      case 'c':
        createFlameChartTab_(tabHeader, status);
        var flameChart = createHiddenTabContent_('flame-chart');
        flameChart.attr('style', 'display: ' + display);
        flame_chart.renderFlameChart(data.c, flameChart);
        break;
      case 'm':
        createMemoryChartTab_(tabHeader, status);
        var memoryChart = createHiddenTabContent_('memory-chart');
        memoryChart.attr('style', 'display: ' + display);
        memory_stats.renderMemoryStats(data.m, memoryChart);
        break;
      case 'h':
        createCodeHeatmapTab_(tabHeader, status);
        var codeHeatmap = createHiddenTabContent_('code-heatmap');
        codeHeatmap.attr('style', 'display: ' + display);
        code_heatmap.renderCodeHeatmap(data.h, codeHeatmap);
        break;
    }
  }
}

/**
  * Makes tab specified by tabId active.
  * @param {string} tabId - Next active tab identifier.
  */
function showTab_(tabId) {
  var allTabs = document.getElementsByClassName('tab-content');
  for (var i = 0; i < allTabs.length; i++) {
    allTabs[i].style.display = 'none';
  }
  var currentTab = document.getElementById(tabId);
  currentTab.style.display = 'block';
}

/** Makes request to server and renders page with received data. */
function main() {
  d3.json(JSON_URI, function(data) {
    renderPage(data);
  });
}

main();

@@ -362,15 +362,8 @@
 pty 
-hidden 
 div 
@@ -379,16 +379,38 @@
 ified ID
+ and class tab-content
 .%0A * @pa
@@ -426,16 +426,8 @@
 ng%7D 
-content_
 id -
@@ -450,30 +450,24 @@
 ction create
-Hidden
 TabContent_(
@@ -575,44 +575,8 @@
  id)
-%0A    .attr('style', 'display: none')
 ;%0A%7D%0A
@@ -2682,38 +2682,32 @@
 meChart = create
-Hidden
 TabContent_('fla
@@ -2722,65 +2722,8 @@
 ');%0A
-        flameChart.attr('style', 'display: ' + display);%0A
     
@@ -2768,32 +2768,89 @@
 c, flameChart);%0A
+        flameChart.attr('style', 'display: ' + display);%0A
         break;%0A 
@@ -2938,38 +2938,32 @@
 ryChart = create
-Hidden
 TabContent_('mem
@@ -2979,66 +2979,8 @@
 ');%0A
-        memoryChart.attr('style', 'display: ' + display);%0A
     
@@ -3028,32 +3028,90 @@
 , memoryChart);%0A
+        memoryChart.attr('style', 'display: ' + display);%0A
         break;%0A 
@@ -3211,14 +3211,8 @@
 eate
-Hidden
 TabC
@@ -3252,51 +3252,54 @@
 code
-H
+_h
 eatmap.
-attr('style', 'display: ' + display
+renderCodeHeatmap(data.h, codeHeatmap
 );%0A 
@@ -3313,54 +3313,51 @@
 code
-_h
+H
 eatmap.
-renderCodeHeatmap(data.h, codeHeatmap
+attr('style', 'display: ' + display
 );%0A 

Fix tab rendering.