NiKhCo_Books_Bookitics

<?php

	// echo 'running code';
	header('Content-type: text/html; charset=utf-8');

	require_once 'AppDotNet.php';
	$app = new AppDotNet('','');

	// You need an app token to consume the stream, get the token returned by App.net
	// (this also sets the token)
	$token = $app->getAppAccessToken();

	$params = array(
		'annotation_types' => 'net.bookitics.bookrating',
		'include_annotations' => true,
	);
	// $params['access_token']=$app->getAppAccessToken();

	try {
		$posts = $app->searchPosts($params);
	} catch(AppDotNetException $x) {
		echo $x;
	}
	// echo $posts;
?>

<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
	$(document).ready(function() {
		$("#responsive_headline").fitText(1.5);
	});
</script>
<style type="text/css">
	body {
		background: url(http://subtlepatterns.com/patterns/paper.png) ;
	}
	#wrapper {
		width: 90%;
		margin: 50px auto;
	}
	#columns {
    	display: -webkit-flexbox;
    	-webkit-column-count: 1;
		-webkit-column-gap: 10px;
		-webkit-column-fill: auto;
		-moz-column-count: 1;
		-moz-column-gap: 10px;
		-moz-column-fill: auto;
		column-count: 1;
		column-gap: 10px;
		column-fill: auto;
	}
	.pin {
		display: inline-block;
		background: #FEFEFE;
		border: 2px solid #FAFAFA;
		box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
		margin: 0 2px 15px;
		-webkit-column-break-inside: avoid;
		-moz-column-break-inside: avoid;
		column-break-inside: avoid;
		padding: 15px;
		padding-bottom: 5px;
		background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
		opacity: 1;
		
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}

	.pin img {
		width: 100%;
		border-bottom: 1px solid #ccc;
		padding-bottom: 15px;
		margin-bottom: 5px;
	}

	.pin p {
		font: 12px/18px Arial, sans-serif;
		color: #333;
		margin: 0;
	}

	@media only screen and (max-device-width: 480px){
		#columns {
			-webkit-column-count: 1;
			-moz-column-count: 1;
			column-count: 1;
		}
		.pin img {
			width: 100%;
			border-bottom: 1px solid #ccc;
			padding-bottom: 15px;
			margin-bottom: 5px;
		}
	}

	/* iPad Landscape */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		#columns {
			-webkit-column-count: 4;
			-moz-column-count: 4;
			column-count: 4;
		}
		.pin img {
			width: 100%;
			border-bottom: 1px solid #ccc;
			padding-bottom: 15px;
			margin-bottom: 5px;
		}
	}

	/* iPad Portrait */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
		#columns {
			-webkit-column-count: 2;
			-moz-column-count: 2;
			column-count: 2;
		}
		.pin img {
			width: 100%;
			border-bottom: 1px solid #ccc;
			padding-bottom: 15px;
			margin-bottom: 5px;
		}
	}

	@media (min-width: 960px) {
		#columns {
			-webkit-column-count: 4;
			-moz-column-count: 4;
			column-count: 4;
		}
	}

	@media (min-width: 1100px) {
		#columns {
			-webkit-column-count: 5;
			-moz-column-count: 5;
			column-count: 5;
		}
	}
</style>

<h1 id="responsive_headline">Book Reviews from <a href="http://bookitics.net/" target="_blank">Bookitics</a></h1>

<div id="wrapper">
	<div id="columns">
		<?php
			foreach ($posts as $key => $post) {
				$imgData = "";
				$bookData = "";
				$hashtags = "";
				// print_r($post);
				// echo $post['data']['annotations'];
				// echo $post['html'];
				echo '<div class="pin">';
				foreach ($post['annotations'] as $annotkey => $annot){
					// print_r($annot['type']);
					if ($annot['type']==='net.app.core.oembed'){
						// echo $annot['value']['url'];
						$imgData = '<a href="'.$post['canonical_url'].'" target="_blank"><img src="'.$annot['value']['url'].'" /></a>';
						// echo '<img />';
					}
					if ($annot['type']==='net.bookitics.bookrating'){
						// echo $annot['value']['author'];
						// echo $annot['value']['short_review'];
						$bookData = '<p>'.$annot['value']['author'].': <b>'.$annot['value']['title'].'</b> - '.$annot['value']['rating'].'★</p><p>'.$annot['value']['short_review'].'</p>';
					}
				}
				foreach ($post['entities']['hashtags'] as $hashkey => $hashtag){
					if($hashtags === ""){
						$hashtags = "<p>";
					}
					else{
						$hashtags = $hashtags.", ";	
					}
					$hashtags = $hashtags.'<a href="https://alpha.app.net/hashtags/'.$hashtag['name'].'" target="_blank">'.$hashtag['name'].'</a>';
				}
				$hashtags = $hashtags.'</p>';
				echo $imgData.$bookData.$hashtags;
				echo '</div>';
				// echo '--------------------------------';
			}
			// echo '<pre>';
			// print_r($posts);
			// echo '</pre>';
		?>
		<!-- <div class="pin">
			<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Sed feugiat consectetur pellentesque. Nam ac elit risus, 
				ac blandit dui. Duis rutrum porta tortor ut convallis.
				Duis rutrum porta tortor ut convallis.
			</p>
		</div> -->
	</div>
</div>