	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Deadly Force::People killed by the police in Kenya</title>
    <link href="css/bootstrap.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
	$(document).ready(function(){

	$('[rel=tooltip_deadlyforce]').bind('mouseover', function(){



	if ($(this).hasClass('ajax')) {
	var ajax = $(this).attr('ajax');	

	$.get(ajax,
	function(theMessage){
	$('<div class="tooltip_deadlyforce">'  + theMessage + '</div>').appendTo('body').fadeIn('fast');});


	}else{

	var theMessage = $(this).attr('content');
	$('<div class="tooltip_deadlyforce">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
	}

	$(this).bind('mousemove', function(e){
	$('div.tooltip_deadlyforce').css({
	'top': e.pageY - ($('div.tooltip_deadlyforce').height() / 2) - 5,
	'left': e.pageX + 15
	});
	});
	}).bind('mouseout', function(){
	$('div.tooltip_deadlyforce').fadeOut('fast', function(){
	$(this).remove();
	});
	});
	});

	</script>

	<style>
	.tooltip_deadlyforce{
	position:absolute;
	width:320px;
	background-image:url(images/tip-bg.png);
	background-position:left center;
	background-repeat:no-repeat;
	color:#FFF;
	padding:5px 5px 5px 18px;
	font-size:12px;
	font-family: "Roboto", Calibri, Candara, Arial, sans-serif;
	
	}

	.tooltip_deadlyforce-image{
	float:left;
	margin-right:5px;
	margin-bottom:5px;
	margin-top:3px;}	

   .tooltip_deadlyforce span{font-weight:700;
	color:#ffea00;}
    
	li{
	margin-bottom:30px;}
	#imagcon{
	overflow:hidden;
	float:left;
	height:100px;
	width:100px;
	margin-right:5px;
	}
	#imagcon img{
	max-width:100px;
	}
	#wrapper{
	margin:0 auto;
	width:100%;
	margin-top: 99px;
	position:relative;
	}
	#victim_tile{/*background:#eee;*/height:30px;width:18px;display:inline-block;margin:3px;}
	#victim_tile:hover{}
	#victim_tile img{opacity:1;}
	#victim_tile img:hover{opacity:1;}
	</style>

	</head>

	<body>
	<div class="container main">
	<div id="wrapper">
	<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";
	try {
	$conn = new PDO("mysql:host=$servername;dbname=$dbname", $dbuser, $dbpass);
	// set the PDO error mode to exception
	$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	//check if victim name exists in the database
	$sthandler = $conn->prepare("select * from police_killings order by date_of_incident desc");
	$sthandler->execute();
	$victims = $sthandler->fetchAll();
    foreach ($victims as $row) {
	$gender=$row['victim_gender'];
	if($gender=='M'){
	$icon='images/male.png';}
	elseif($gender=='F'){
	$icon='images/female.png';}
	else{
	$icon='images/unknown.png';}
	
	$incident_date=date_create($row['date_of_incident']);
	echo '<a href=# alt=Image tooltip_deadlyforce rel=tooltip_deadlyforce content=';
	echo '"<div id=name>Name:'.$row['victim_names'].'</div>
		 <div id=gender>Gender:'.$row['victim_gender'].'</div>
		 <div id=age>Age:'.$row['victim_age'].'</div>
		 <div id=incident_date>Date of incident:'.date_format($incident_date,"F d, Y").'</div>
		 <div id=county>County:'.$row['incident_county_or_town'].'</div>
		 <div id=victim_armed>Victim armed/unarmed:'.$row['victim_armed_unarmed'].'</div>
		 <div id=officers_identified>Officers identified:'.$row['officer_involved'].'</div>
		 <div id=status_of_case>Status of case:'.$row['status_of_case'].'</div>
		 <div id=summary>Summary:'.$row['incident_summary'].
		 '</div>">'.
		 '<div id="victim_tile"><img src='.$icon.'></div>'.
		 '</a>';
		
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
    $conn = null;
	?> 
	</div>
	</div>
	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	
	<script src="js/bootstrap.min.js"></script>
	<script src="js/bootswatch.js"></script>
	</body>
	</html>
