<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="&#xe088;"></span> Employee Information
		          </div>
		        </div>
		        <div class="widget-body">
		          <table class="table table-bordered table-striped">
		            <thead>
		              <tr>
						<th style="width:16%">Full Name</th>
		                <th style="width:16%">Income</th>
		                <th style="width:16%">Bonuses</th>
		                <th style="width:16%">Years w/ MetaCorp</th>
		                <th style="width:16%">SSN</th>
						<th style="width:16%">DoB</th>
		              </tr>
		            </thead>
		            <tbody>
		            
					  <tr>
		                <td><%= "#{@user.first_name} #{@user.last_name}" %></td>
		                <td><%= @user.work_info.income %></td>
		                <td><%= @user.work_info.bonuses %></td>
		                <td><%= @user.work_info.years_worked %></td>
						<td class="ssn"><%= @user.work_info.SSN %></td>
						<!-- Begin Secure Version>-->
						<!--<td class="ssn"><%#= @user.work_info.last_four %></td>-->
						<!-- End Secure Version -->
						<td><%= @user.work_info.DoB %></td>
		              </tr>
		           
		            </tbody>
		          </table>
		        </div>
		      </div>
		    </div>
		</div>
	</div>
</div>		

<script type="text/javascript">

// This should be an EXCELLENT feature!!!
function maskSSN(){
	var fullSSN = $("td.ssn").html().replace(/\d{3}.*?\d{2}/, "*****");
	$("td.ssn").html(fullSSN);
	
}


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

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

</script>