<div class="dashboard-wrapper">
	<div class="main-container">
		<div class="row-fluid">
          <div class="span12">
            <div class="widget">
              <div class="widget-header">
                <div class="title">
                  <span class="fs1" aria-hidden="true" data-icon="&#xe096;"></span> Performance History Visualization
                </div>
              </div>
              <div class="widget-body">
                <div id="line_chart"></div>
              </div>
            </div>
          </div>
		<div class="row-fluid">
		    <div class="span12">
		      <div class="widget">
		        <div class="widget-header">
		          <div class="title">
		            <span class="fs1" aria-hidden="true" data-icon="&#xe004;"></span> Performance History
		          </div>
		        </div>
		        <div class="widget-body">
		          <table class="table table-bordered table-striped">
		            <thead>
		              <tr>
						<th style="width:16%">Reviewer</th>
		                <th style="width:16%">Date</th>
		                <th style="width:16%">Score</th>
		                <th style="width:16%">Comments</th>
		              </tr>
		            </thead>
		            <tbody>
		            <% @perf.each do |p| %>
					  <tr>
		                <td><%= p.reviewer_name %></td>
		                <td><%= p.date_submitted %></td>
		                <td><%= p.score %></td>
		                <td><%= p.comments %></td>
		              </tr>
		            <% end %>
		            </tbody>
		          </table>
		        </div>
		      </div>
		    </div>
		</div>
	</div>
</div>

<script type="text/javascript">


 google.load("visualization", "1", {
  packages: ["corechart"]
});

function drawChart2() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Score'],
    <% @perf.each do |p| %>
    // Let's just hope this data isn't suspectible during later releases ;-)
    [ <%= "#{p.date_submitted}".inspect.html_safe %>, <%= p.score %> ],
    <% end %>
    ]);

  var options = {
    min: 1, 
    max: 5,
    width: 'auto',
    height: '160',
    backgroundColor: 'transparent',
    colors: ['#e26666', '#579da9', '#1e825e', '#b5799e', '#dba26b'],
    tooltip: {
      textStyle: {
        color: '#666666',
        fontSize: 11
      },
      showColorCode: true
    },
    legend: {
      textStyle: {
        color: 'black',
        fontSize: 12
      }
    },
    chartArea: {
      left: 100,
      top: 10
    },
    focusTarget: 'category',
    hAxis: {
      textStyle: {
        color: 'black',
        fontSize: 12
      }
    },
    vAxis: {
      textStyle: {
        color: 'black',
        fontSize: 12
      }
    },
    pointSize: 8,
    chartArea: {
      left: 60,
      top: 10,
      height: '80%'
    },
    lineWidth: 2,
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
  chart.draw(data, options);
}

function makeActive(){
	$('li[id="performance"]').addClass('active');
};

$(document).ready(function () {
  drawChart2(),
  makeActive()
});

</script>