	<!DOCTYPE html>

	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<title>Deadly Force::People killed by the police in Kenya</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="" />
	<meta name="robots" content="all">
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<link rel="icon" href="favicon.ico" />
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<!-- Bootstrap theme -->
	<link href="css/bootswatch_min.css" rel="stylesheet">
	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ubuntu:400italic,400">
	<script src="js/jquery.min.js"></script>
	<style>

	/*
	TOOLTIP
	*/

	#tooltip
	{
	font-family: "Roboto", Calibri, Candara, Arial, sans-serif;
	font-size:13px;
	text-align: left;
	line-height: 1.5;
	color: #fff;
	background:rgba( 0, 0, 0, .8 );
	position: absolute;
	z-index: 100;
	padding: 15px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	cursor: pointer;
	display: block;
	
	}
	#tooltip:after
	{
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #333;
	border-top-color: rgba( 0, 0, 0, .8 );
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px;
	margin-left: -10px;
	}
	#tooltip.top:after
	{
	border-top-color: transparent;
	border-bottom: 10px solid #333;
	border-bottom-color: rgba( 0, 0, 0, .6 );
	top: -20px;
	bottom: auto;
	}
	#tooltip.left:after
	{
	left: 10px;
	margin: 0;
	}
	#tooltip.right:after
	{
	right: 10px;
	left: auto;
	margin: 0;
	}
	#victim_tile{/*background:#eee;*/height:30px;width:20px;display:inline-block;margin:3px;}
	#victim_tile:hover{}
	#victim_tile img{opacity:0.7;cursor:pointer;}
	#victim_tile img:hover{opacity:1;}
	.victim_names{font-size:2em;}
	.incident_date{font-size:1.5em;}
	.officer_involved{font-size:1.2em;}
	.incident_summary{border-top:1px dotted #aaa9a9;border-bottom:1px dotted #aaa9a9;}
	.victim_gender,.victim_age,.incident_county,.victim_armed,.victim_occupation,.police_weapon{border-bottom:1px dotted #aaa9a9;}
    </style>
	</head>
    <body>
    <div class="container main">
	<p>
	<?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 title="'.
	     '<div class=\'victim_names\'>'.'<span class=\'label label-success\'>'.$row['victim_names'].'</span>'.'</div>'.
		 '<div class=\'incident_date\'>'.'<span class=\'label label-warning\'>'.date_format($incident_date,"F d, Y").'</div>'.'</div>'.
		 '<div class=\'victim_gender\'>'.'Gender: '.$row['victim_gender'].'</div>'.
		 '<div class=\'victim_age\'>'.'Age: '.$row['victim_age'].'</div>'.
		 '<div class=\'incident_county\'>'.'County: '.$row['incident_county_or_town'].'</div>'.
		 '<div class=\'victim_armed\'>'.'Victim weapon: '.$row['victim_armed_unarmed'].'</div>'.
		 '<div class=\'victim_occupation\'>'.'Victim occupation: '.$row['victim_occupation'].'</div>'.
		 '<div class=\'police_weapon\'>'.'Police weapon: '.$row['police_weapon'].'</div>'.
		 '<div class=\'officer_involved\'>'.'<span class=\'label label-info\'>'.'Officer(s) identified: '.$row['officer_involved'].'</span>'.'</div>'.
		 '<div class=\'case_status\'>'.'Case status: '.$row['status_of_case'].'</div>'.
		 '<div class=\'incident_summary\'>'.$row['incident_summary'].'</div>'.
		 '" rel="tooltip">'.
		 '<div id="victim_tile"><img src="'.$icon.'">'.'</div>'.
		 '</a>';	
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
    $conn = null;
	?> 
	</p>
	</div>

	<script src="jquery.min.js"></script>
	<script>

	/*
	TOOLTIP
	*/

	$( function()
	{
	var targets = $( '[rel~=tooltip]' ),
	target	= false,
	tooltip = false,
	title	= false;

	targets.bind( 'mouseenter', function()
	{
	target	= $( this );
	tip		= target.attr( 'title' );
	tooltip	= $( '<div id="tooltip"></div>' );

	if( !tip || tip == '' )
	return false;

	target.removeAttr( 'title' );
	tooltip.css( 'opacity', 0 )
	.html( tip )
	.appendTo( 'body' );

	var init_tooltip = function()
	{
	if( $( window ).width() < tooltip.outerWidth() * 1.5 )
	tooltip.css( 'max-width', $( window ).width() / 2 );
	else
	tooltip.css( 'max-width', 340 );

	var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
	pos_top	 = target.offset().top - tooltip.outerHeight() - 20;

	if( pos_left < 0 )
	{
	pos_left = target.offset().left + target.outerWidth() / 2 - 20;
	tooltip.addClass( 'left' );
	}
	else
	tooltip.removeClass( 'left' );

	if( pos_left + tooltip.outerWidth() > $( window ).width() )
	{
	pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
	tooltip.addClass( 'right' );
	}
	else
	tooltip.removeClass( 'right' );

	if( pos_top < 0 )
	{
	var pos_top	 = target.offset().top + target.outerHeight();
	tooltip.addClass( 'top' );
	}
	else
	tooltip.removeClass( 'top' );

	tooltip.css( { left: pos_left, top: pos_top } )
	.animate( { top: '+=10', opacity: 1 }, 50 );
	};

	init_tooltip();
	$( window ).resize( init_tooltip );

	var remove_tooltip = function()
	{
	tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
	{
	$( this ).remove();
	});

	target.attr( 'title', tip );
	};

	target.bind( 'mouseleave', remove_tooltip );
	tooltip.bind( 'click', remove_tooltip );
	});
	});

	</script>
    <!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	</div>
	<script src="js/bootstrap.min.js"></script>
	</body>

	</html>